InstanceMeshManager

src/core/manager/InstanceMeshBlock.ts

@@ -18,16 +18,16 @@ export default class InstanceMeshBlock {
     return this.freeIndices.pop() // Return the last free index
   }
 
-  constructor(name: string, allowSelect: boolean, allowDrag: boolean, viewport: Viewport,
+  constructor(itemTypeName: string, allowSelect: boolean, allowDrag: boolean, viewport: Viewport,
               geometry: THREE.BufferGeometry, material: THREE.Material,
               blockIndex: number, capacity: number) {
-    this.name = name
+    this.name = itemTypeName
     this.blockIndex = blockIndex
     this.viewport = viewport
     this.instancedMesh = new THREE.InstancedMesh(geometry, material, capacity)
     this.instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage)
 
-    console.log('createBlock: [' + blockIndex + '] created with capacity:', capacity)
+    console.log('createBlock: ' + itemTypeName + '[' + blockIndex + '] capacity:', capacity)
     viewport.scene.add(this.instancedMesh)
     if (allowSelect) {
       this.viewport.entityManager._selectableObjects.push(this.instancedMesh)
@@ -36,8 +36,12 @@ export default class InstanceMeshBlock {
       this.viewport.entityManager._draggableObjects.push(this.instancedMesh)
     }
 
-    this.instancedMesh.userData.t = name
-    this.instancedMesh.userData.entityId = 'InstanceMeshBlock_' + name + '_' + blockIndex
+    this.instancedMesh.userData.t = itemTypeName
+    this.instancedMesh.userData.entityId = 'InstanceMeshBlock_' + itemTypeName + '_' + blockIndex
+    _.extend(this.instancedMesh.userData,{
+      t: itemTypeName,
+      blockIndex: blockIndex
+    })
 
     const dummy = new THREE.Object3D()
     dummy.scale.set(0, 0, 0)

src/core/manager/InstanceMeshManager.ts

@@ -0,0 +1,151 @@
+import * as THREE from 'three'
+import type Viewport from '@/core/engine/Viewport.ts'
+import InstanceMeshBlock from '@/core/manager/InstanceMeshBlock.ts'
+import { PointManageWrap } from '@/core/manager/InstancePointManager.ts'
+
+export default class InstanceMeshManager {
+  private __uuidMap = new Map<string, InstanceMeshWrap>()
+
+  public readonly name: string
+  public readonly viewport: Viewport
+  public readonly allowSelect: boolean
+  public readonly allowDrag: boolean
+  public readonly blockCapacity: number = 1000 // 每个 block 的容量
+
+  public readonly blocks: InstanceMeshBlock[] = []
+  private readonly geometry: THREE.BufferGeometry
+  private readonly material: THREE.Material
+
+  private readonly dummy: THREE.Object3D = new THREE.Object3D()
+
+  constructor(name: string, viewport: Viewport, allowSelect: boolean, allowDrag: boolean,
+              geometry: THREE.BufferGeometry, material: THREE.Material) {
+    this.name = name
+    this.viewport = viewport
+    this.allowSelect = allowSelect
+    this.allowDrag = allowDrag
+    this.geometry = geometry
+    this.material = material
+  }
+
+  /**
+   * 获取点实例数据
+   */
+  findByMeshInstanceId(blockIndex: number, instanceId: number): InstanceMeshWrap {
+    if (!this.blocks[blockIndex]) {
+      console.error('InstancePointManager: Invalid blockIndex', blockIndex)
+      return null
+    }
+    const uuid = this.blocks[blockIndex].__indexIdMap.get(instanceId)
+    if (!uuid) return
+    return this.__uuidMap.get(uuid)
+  }
+
+  create(entityId: string): InstanceMeshWrap {
+    let meshIndex = -1
+    let blockIndex = -1
+    for (const block of this.blocks) {
+      meshIndex = block.getFreeMeshIndex()
+      if (meshIndex >= 0) {
+        blockIndex = block.blockIndex
+        break
+      }
+    }
+    // 所有 block 都没有空闲索引，创建新的 block
+    if (meshIndex < 0) {
+      const block = this.createBlock()
+      meshIndex = block.getFreeMeshIndex()
+      blockIndex = block.blockIndex
+    }
+    if (meshIndex < 0) {
+      system.showErrorDialog('InstancePointManager: No free index available after creating new block')
+      return null
+    }
+
+    return new InstanceMeshWrap(entityId, this, blockIndex, meshIndex)
+  }
+
+  delete(wrap: InstanceMeshWrap) {
+    const block = this.blocks[wrap.blockIndex]
+    if (!block) {
+      console.warn(`InstanceMeshManager: Block ${wrap.blockIndex} not found for wrap ${wrap.uuid}`)
+      return
+    }
+
+    // 隐藏实例
+    this.dummy.scale.set(0, 0, 0)
+    this.dummy.updateMatrix()
+    block.instancedMesh.setMatrixAt(wrap.meshIndex, this.dummy.matrix)
+    block.instancedMesh.instanceMatrix.needsUpdate = true
+
+    // 回收索引
+    block.freeIndices.push(wrap.meshIndex)
+    this.__uuidMap.delete(wrap.uuid)
+    block.__indexIdMap.delete(wrap.meshIndex)
+
+    wrap.dispose()
+  }
+
+  // 创建新的 InstanceMeshBlock
+  createBlock(): InstanceMeshBlock {
+    const blockIndex = this.blocks.length
+    const block = new InstanceMeshBlock(this.name, this.allowSelect, this.allowDrag,
+      this.viewport, this.geometry, this.material,
+      blockIndex, this.blockCapacity)
+    this.blocks.push(block)
+    return block
+  }
+
+  setBlockMatrixAt(wrap: InstanceMeshWrap, matrix: THREE.Matrix4) {
+    const block = this.blocks[wrap.blockIndex]
+    if (!block) {
+      console.warn(`InstanceMeshManager: Block ${wrap.blockIndex} not found!`)
+      return
+    }
+    this.__uuidMap.set(wrap.uuid, wrap)
+    block.instancedMesh.setMatrixAt(wrap.meshIndex, matrix)
+    wrap.parent = block.instancedMesh
+    wrap.visible = true // 默认可见
+    block.instancedMesh.instanceMatrix.needsUpdate = true
+  }
+
+  dispose() {
+    for (const block of this.blocks) {
+      block.dispose()
+    }
+    this.blocks.length = 0 // 清空 blocks 数组
+    this.geometry.dispose() // 释放几何体资源
+    this.material.dispose() // 释放材质资源
+    console.log(`InstanceMeshManager ${this.name} disposed.`)
+  }
+}
+
+export class InstanceMeshWrap {
+  readonly entityId: string
+  readonly manager: InstanceMeshManager
+  readonly blockIndex: number
+  readonly meshIndex: number
+
+  uuid: string
+  parent: THREE.Object3D | null = null
+  name: string
+  visible: boolean
+
+  constructor(entityId: string, manager: InstanceMeshManager, blockIndex: number, meshIndex: number) {
+    this.uuid = system.createUUID()
+    this.entityId = entityId
+    this.manager = manager
+    this.meshIndex = meshIndex
+    this.blockIndex = blockIndex
+  }
+
+  syncMatrix(matrix: THREE.Matrix4): InstanceMeshWrap {
+    this.manager.setBlockMatrixAt(this, matrix)
+    return this
+  }
+
+  dispose() {
+    this.manager.delete(this)
+    this.parent = null
+  }
+}

src/core/manager/InstancePointManager.ts

@@ -163,9 +163,16 @@ export default class InstancePointManager {
    */
   deletePoint(id: string): void {
     const wrap = this.__uuidMap.get(id)
-    if (wrap === undefined) return
+    if (!wrap) {
+      console.warn(`InstanceMeshManager: Wrap with id ${id} not found`)
+      return
+    }
 
     const block = this.blocks[wrap.blockIndex]
+    if (!block) {
+      console.warn(`InstanceMeshManager: Block ${wrap.blockIndex} not found for wrap ${id}`)
+      return
+    }
 
     // 隐藏实例
     this.dummy.scale.set(0, 0, 0)

src/modules/rack/RackRenderer.ts

@@ -1,16 +1,14 @@
 import * as THREE from 'three'
+import { BufferGeometry } from 'three'
 import BaseRenderer from '@/core/base/BaseRenderer.ts'
-import { Line2 } from 'three/examples/jsm/lines/Line2.js'
-import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
-import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
-import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js";
 import { decimalSumBy } from '@/core/ModelUtils'
 import Constract from '@/core/Constract.ts'
 import Plastic_Rough_JPG from '@/assets/Models/Plastic_Rough.jpg'
-import {BufferGeometry} from "three";
-import storageBar_PNG from "@/assets/Models/storageBar.png";
-import {Material} from "three/src/materials/Material";
-import {InstancedMesh} from "three/src/objects/InstancedMesh";
+import storageBar_PNG from '@/assets/Models/storageBar.png'
+import { Material } from 'three/src/materials/Material'
+import { InstancedMesh } from 'three/src/objects/InstancedMesh'
+//@ts-ignore
+import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js'
 
 /**
  * 货架货位渲染器
@@ -127,7 +125,7 @@ export default class RackRenderer extends BaseRenderer {
     //   group.add(lineT as THREE.Object3D)
     // }
 
-    const meshes = this.createRack(item, option);
+    const meshes = this.createRack(item, option)
 
     meshes.forEach(mesh => {
       group.add(mesh)
@@ -212,10 +210,10 @@ export default class RackRenderer extends BaseRenderer {
   createVerticalBar(x, y, z, length): THREE.BufferGeometry {
 
     // 创建一个形状 柱子的截面形状
-    const shape = new THREE.Shape();
-    shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y);
+    const shape = new THREE.Shape()
+    shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y)
     for (let i = 1; i < this.barSectionPoints.length; i++) {
-      shape.lineTo(this.barSectionPoints[i].x , this.barSectionPoints[i].y);
+      shape.lineTo(this.barSectionPoints[i].x, this.barSectionPoints[i].y)
     }
 
     // 拉伸轨迹线
@@ -224,18 +222,18 @@ export default class RackRenderer extends BaseRenderer {
       false,  // 闭合曲线
       'catmullrom',
       0
-    );
+    )
 
     // 挤出几何图形 参数
     const options = {
       steps: 1,
       bevelEnabled: false,
-      extrudePath: curve, //  设置挤出轨迹
-    };
+      extrudePath: curve //  设置挤出轨迹
+    }
     // 创建挤出几何体
-    const geometry = new THREE.ExtrudeGeometry(shape, options);
+    const geometry = new THREE.ExtrudeGeometry(shape, options)
     // 调整uv方便正确贴图
-    this.resetUVs(geometry);
+    this.resetUVs(geometry)
     return geometry
   }
 
@@ -244,29 +242,29 @@ export default class RackRenderer extends BaseRenderer {
     let textureLoader = new THREE.TextureLoader()
 
     // 加载纹理
-    const textureHole = textureLoader.load(storageBar_PNG); // 孔洞
-    const textureMaterial = textureLoader.load(Plastic_Rough_JPG); // 表面材质
+    const textureHole = textureLoader.load(storageBar_PNG) // 孔洞
+    const textureMaterial = textureLoader.load(Plastic_Rough_JPG) // 表面材质
 
-    textureHole.repeat.set(10, 18); // X轴重复，Y轴重复
-    textureMaterial.repeat.set(2, 2); // X轴重复，Y轴重复
+    textureHole.repeat.set(10, 18) // X轴重复，Y轴重复
+    textureMaterial.repeat.set(2, 2) // X轴重复，Y轴重复
     // textureHole.offset.set(0.5, 0)
     // textureHole.center.set(0.5, 0)
 
     // 必须设置包裹模式为重复
-    textureHole.wrapS = THREE.RepeatWrapping;
-    textureHole.wrapT = THREE.RepeatWrapping;
-    textureMaterial.wrapS = THREE.RepeatWrapping;
-    textureMaterial.wrapT = THREE.RepeatWrapping;
+    textureHole.wrapS = THREE.RepeatWrapping
+    textureHole.wrapT = THREE.RepeatWrapping
+    textureMaterial.wrapS = THREE.RepeatWrapping
+    textureMaterial.wrapT = THREE.RepeatWrapping
 
-    const material = new THREE.MeshPhongMaterial();
-    material.alphaMap = textureHole;
-    material.normalMap = textureMaterial;
-    material.color.setHex(this.rackVerticalBarColor, "srgb");
-    material.specular.setHex(0xff6d6d6d, 'srgb');
-    material.transparent = true;
-    material.needsUpdate = true;
+    const material = new THREE.MeshPhongMaterial()
+    material.alphaMap = textureHole
+    material.normalMap = textureMaterial
+    material.color.setHex(this.rackVerticalBarColor, 'srgb')
+    material.specular.setHex(0xff6d6d6d, 'srgb')
+    material.transparent = true
+    material.needsUpdate = true
 
-    return material;
+    return material
   }
 
   createLinkBar(x, y, z, vBarLength, depth, bottomDistance, topDistance): THREE.BufferGeometry {
@@ -274,10 +272,10 @@ export default class RackRenderer extends BaseRenderer {
     const bgs: BufferGeometry[] = []
     const top = vBarLength - topDistance
     // 创建一个形状 柱子的截面形状
-    const shape = new THREE.Shape();
-    shape.moveTo(this.linkBarSectionPoints[0].x, this.linkBarSectionPoints[0].y);
+    const shape = new THREE.Shape()
+    shape.moveTo(this.linkBarSectionPoints[0].x, this.linkBarSectionPoints[0].y)
     for (let i = 1; i < this.linkBarSectionPoints.length; i++) {
-      shape.lineTo(this.linkBarSectionPoints[i].x, this.linkBarSectionPoints[i].y);
+      shape.lineTo(this.linkBarSectionPoints[i].x, this.linkBarSectionPoints[i].y)
     }
 
     // 拉伸轨迹线 横向 底部
@@ -286,14 +284,14 @@ export default class RackRenderer extends BaseRenderer {
       false,  // 闭合曲线
       'catmullrom',
       0
-    );
+    )
 
     // 挤出几何图形 参数
     const optionsHBottom = {
       steps: 1,
       bevelEnabled: false,
-      extrudePath: curveHBottom, //  设置挤出轨迹
-    };
+      extrudePath: curveHBottom //  设置挤出轨迹
+    }
 
     // 拉伸轨迹线 横向 底部
     const curveHTop = new THREE.CatmullRomCurve3(
@@ -301,18 +299,18 @@ export default class RackRenderer extends BaseRenderer {
       false,  // 闭合曲线
       'catmullrom',
       0
-    );
+    )
 
     // 挤出几何图形 参数
     const optionsHTop = {
       steps: 1,
       bevelEnabled: false,
-      extrudePath: curveHTop, //  设置挤出轨迹
-    };
+      extrudePath: curveHTop //  设置挤出轨迹
+    }
 
     // 创建挤出几何体
-    const geometryHBottom = new THREE.ExtrudeGeometry(shape, optionsHBottom);
-    const geometryHTop  = new THREE.ExtrudeGeometry(shape, optionsHTop);
+    const geometryHBottom = new THREE.ExtrudeGeometry(shape, optionsHBottom)
+    const geometryHTop = new THREE.ExtrudeGeometry(shape, optionsHTop)
     bgs.push(geometryHBottom, geometryHTop)
 
     let remainingHeight = vBarLength - bottomDistance - topDistance
@@ -327,47 +325,46 @@ export default class RackRenderer extends BaseRenderer {
         false,  // 闭合曲线
         'catmullrom',
         0
-      );
+      )
 
       const optionsD = {
         steps: 1,
         bevelEnabled: false,
-        extrudePath: curveD, //  设置挤出轨迹
-      };
+        extrudePath: curveD //  设置挤出轨迹
+      }
 
-      const geometryD = new THREE.ExtrudeGeometry(shape, optionsD);
+      const geometryD = new THREE.ExtrudeGeometry(shape, optionsD)
       bgs.push(geometryD)
     }
 
     if (vBarLength - bottomDistance - topDistance > depth) {
 
 
-
     }
 
     // 调整uv方便正确贴图
     // this.resetUVs(geometry);
-    return BufferGeometryUtils.mergeGeometries(bgs)
+    return mergeGeometries(bgs)
   }
 
   createLinkBarMaterial(): THREE.Material {
 
-    const material = new THREE.MeshPhongMaterial();
-    material.color.setHex(this.rackLinkBarColor, "srgb");
-    material.specular.setHex(0xff6d6d6d, 'srgb');
-    material.transparent = true;
-    material.needsUpdate = true;
+    const material = new THREE.MeshPhongMaterial()
+    material.color.setHex(this.rackLinkBarColor, 'srgb')
+    material.specular.setHex(0xff6d6d6d, 'srgb')
+    material.transparent = true
+    material.needsUpdate = true
 
-    return material;
+    return material
   }
 
   createHorizontalBar(x, y, z, length): THREE.BufferGeometry {
 
     // 创建一个形状 柱子的截面形状
-    const shape = new THREE.Shape();
-    shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y);
+    const shape = new THREE.Shape()
+    shape.moveTo(this.barSectionPoints[0].x, this.barSectionPoints[0].y)
     for (let i = 1; i < this.barSectionPoints.length; i++) {
-      shape.lineTo(this.barSectionPoints[i].x , this.barSectionPoints[i].y);
+      shape.lineTo(this.barSectionPoints[i].x, this.barSectionPoints[i].y)
     }
 
     // 拉伸轨迹线
@@ -376,24 +373,24 @@ export default class RackRenderer extends BaseRenderer {
       false,  // 闭合曲线
       'catmullrom',
       0
-    );
+    )
 
     // 挤出几何图形 参数
     const options = {
       steps: 1,
       bevelEnabled: false,
-      extrudePath: curve, //  设置挤出轨迹
-    };
+      extrudePath: curve //  设置挤出轨迹
+    }
     // 创建挤出几何体
-    const geometry = new THREE.ExtrudeGeometry(shape, options);
+    const geometry = new THREE.ExtrudeGeometry(shape, options)
 
-    const linkShapeL = new THREE.Shape();
-    const linkShapeR = new THREE.Shape();
-    linkShapeL.moveTo(this.linkSectionPoints[0].x, this.linkSectionPoints[0].y);
-    linkShapeR.moveTo(this.linkSectionPoints[0].x + (length), this.linkSectionPoints[0].y);
+    const linkShapeL = new THREE.Shape()
+    const linkShapeR = new THREE.Shape()
+    linkShapeL.moveTo(this.linkSectionPoints[0].x, this.linkSectionPoints[0].y)
+    linkShapeR.moveTo(this.linkSectionPoints[0].x + (length), this.linkSectionPoints[0].y)
     for (let i = 1; i < this.linkSectionPoints.length; i++) {
-      linkShapeL.lineTo(this.linkSectionPoints[i].x , this.linkSectionPoints[i].y);
-      linkShapeR.lineTo(this.linkSectionPoints[i].x + (length), this.linkSectionPoints[i].y);
+      linkShapeL.lineTo(this.linkSectionPoints[i].x, this.linkSectionPoints[i].y)
+      linkShapeR.lineTo(this.linkSectionPoints[i].x + (length), this.linkSectionPoints[i].y)
     }
 
     // 拉伸轨迹线
@@ -402,36 +399,35 @@ export default class RackRenderer extends BaseRenderer {
       false,  // 闭合曲线
       'catmullrom',
       0
-    );
+    )
 
     // 挤出几何图形 参数
     const linkOptions = {
       steps: 1,
       bevelEnabled: false,
-      extrudePath: linkCurve, //  设置挤出轨迹
-    };
+      extrudePath: linkCurve //  设置挤出轨迹
+    }
     // 创建挤出几何体
-    const linkGeometryL = new THREE.ExtrudeGeometry(linkShapeL, linkOptions);
+    const linkGeometryL = new THREE.ExtrudeGeometry(linkShapeL, linkOptions)
     linkGeometryL.rotateZ(-Math.PI / 2)
-    const linkGeometryR = new THREE.ExtrudeGeometry(linkShapeR, linkOptions);
+    const linkGeometryR = new THREE.ExtrudeGeometry(linkShapeR, linkOptions)
     linkGeometryR.rotateX(-Math.PI)
     linkGeometryR.rotateZ(-Math.PI / 2)
 
-
     // 调整uv方便正确贴图
     // this.resetUVs(geometry);
-    return BufferGeometryUtils.mergeGeometries([geometry, linkGeometryL, linkGeometryR])
+    return mergeGeometries([geometry, linkGeometryL, linkGeometryR])
   }
 
   createHorizontalBarMaterial(): THREE.Material {
 
-    const material = new THREE.MeshPhongMaterial();
-    material.color.setHex(this.rackHorizontalBarColor, "srgb");
-    material.specular.setHex(0xff6d6d6d, 'srgb');
-    material.transparent = true;
-    material.needsUpdate = true;
+    const material = new THREE.MeshPhongMaterial()
+    material.color.setHex(this.rackHorizontalBarColor, 'srgb')
+    material.specular.setHex(0xff6d6d6d, 'srgb')
+    material.transparent = true
+    material.needsUpdate = true
 
-    return material;
+    return material
   }
 
   createRack(item: ItemJson, option?: RendererCudOption): InstancedMesh[] {
@@ -455,12 +451,12 @@ export default class RackRenderer extends BaseRenderer {
     const rackHeight = _.max(heights)
 
     // 计算立住坐标点和长度
-    const vBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = [];
+    const vBarMatrix: { x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number }[] = []
 
     // 计算
-    const linkBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = [];
+    const linkBarMatrix: { x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number }[] = []
 
-    let distanceX = 0, distanceY = 0;
+    let distanceX = 0, distanceY = 0
 
     for (let i = -1; i < item.dt.bays.length; i++) {
       if (i >= 0) {
@@ -506,10 +502,10 @@ export default class RackRenderer extends BaseRenderer {
     }
 
     // 计算横梁数量
-    const hBarMatrix: {x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number}[] = [];
-    distanceX = 0;
+    const hBarMatrix: { x: number, y: number, z: number, sx: number, sy: number, sz: number, rx: number, ry: number, rz: number, l: number }[] = []
+    distanceX = 0
     for (let i = 0; i < item.dt.bays.length; i++) {
-      distanceY = this.bottomBarHeight;
+      distanceY = this.bottomBarHeight
       const bay = item.dt.bays[i]
       for (let j = 0; j < bay.levelHeight.length; j++) {
         const levelHeight = bay.levelHeight[j]
@@ -545,7 +541,7 @@ export default class RackRenderer extends BaseRenderer {
       distanceX += bay.bayWidth
     }
 
-    const meshes: InstancedMesh[] = [];
+    const meshes: InstancedMesh[] = []
 
     if (vBarMatrix.length > 0) {
       if (!this.rackVerticalBarGeometry) {
@@ -554,15 +550,15 @@ export default class RackRenderer extends BaseRenderer {
       if (!this.rackVerticalBarMaterial) {
         this.rackVerticalBarMaterial = this.createVerticalBarMaterial()
       }
-      const dummy = new THREE.Object3D();
-      const vBarMesh = new THREE.InstancedMesh(this.rackVerticalBarGeometry, this.rackVerticalBarMaterial, vBarMatrix.length);
+      const dummy = new THREE.Object3D()
+      const vBarMesh = new THREE.InstancedMesh(this.rackVerticalBarGeometry, this.rackVerticalBarMaterial, vBarMatrix.length)
       for (let i = 0; i < vBarMatrix.length; i++) {
         const vp = vBarMatrix[i]
-        dummy.position.set(vp.x, vp.y, vp.z);
-        dummy.rotation.set(vp.rx, vp.ry, vp.rz);
-        dummy.scale.set(vp.sx, vp.sy, vp.sz);
-        dummy.updateMatrix();
-        vBarMesh.setMatrixAt(i, dummy.matrix);
+        dummy.position.set(vp.x, vp.y, vp.z)
+        dummy.rotation.set(vp.rx, vp.ry, vp.rz)
+        dummy.scale.set(vp.sx, vp.sy, vp.sz)
+        dummy.updateMatrix()
+        vBarMesh.setMatrixAt(i, dummy.matrix)
       }
       meshes.push(vBarMesh)
     }
@@ -574,15 +570,15 @@ export default class RackRenderer extends BaseRenderer {
       if (!this.rackLinkBarMaterial) {
         this.rackLinkBarMaterial = this.createLinkBarMaterial()
       }
-      const dummy = new THREE.Object3D();
-      const linkBarMesh = new THREE.InstancedMesh(this.rackLinkBarGeometry, this.rackLinkBarMaterial, linkBarMatrix.length);
+      const dummy = new THREE.Object3D()
+      const linkBarMesh = new THREE.InstancedMesh(this.rackLinkBarGeometry, this.rackLinkBarMaterial, linkBarMatrix.length)
       for (let i = 0; i < linkBarMatrix.length; i++) {
         const lp = linkBarMatrix[i]
-        dummy.position.set(lp.x, lp.y, lp.z);
-        dummy.rotation.set(lp.rx, lp.ry, lp.rz);
-        dummy.scale.set(lp.sx, lp.sy, lp.sz);
-        dummy.updateMatrix();
-        linkBarMesh.setMatrixAt(i, dummy.matrix);
+        dummy.position.set(lp.x, lp.y, lp.z)
+        dummy.rotation.set(lp.rx, lp.ry, lp.rz)
+        dummy.scale.set(lp.sx, lp.sy, lp.sz)
+        dummy.updateMatrix()
+        linkBarMesh.setMatrixAt(i, dummy.matrix)
       }
       meshes.push(linkBarMesh)
     }
@@ -594,51 +590,51 @@ export default class RackRenderer extends BaseRenderer {
       if (!this.rackHorizontalBarMaterial) {
         this.rackHorizontalBarMaterial = this.createHorizontalBarMaterial()
       }
-      const dummy = new THREE.Object3D();
-      const hBarMesh = new THREE.InstancedMesh(this.rackHorizontalBarGeometry, this.rackHorizontalBarMaterial, hBarMatrix.length);
+      const dummy = new THREE.Object3D()
+      const hBarMesh = new THREE.InstancedMesh(this.rackHorizontalBarGeometry, this.rackHorizontalBarMaterial, hBarMatrix.length)
       for (let i = 0; i < hBarMatrix.length; i++) {
         const hp = hBarMatrix[i]
-        dummy.position.set(hp.x, hp.y, hp.z);
-        dummy.rotation.set(hp.rx, hp.ry, hp.rz);
-        dummy.scale.set(hp.sx, hp.sy, hp.sz);
-        dummy.updateMatrix();
-        hBarMesh.setMatrixAt(i, dummy.matrix);
+        dummy.position.set(hp.x, hp.y, hp.z)
+        dummy.rotation.set(hp.rx, hp.ry, hp.rz)
+        dummy.scale.set(hp.sx, hp.sy, hp.sz)
+        dummy.updateMatrix()
+        hBarMesh.setMatrixAt(i, dummy.matrix)
       }
       meshes.push(hBarMesh)
     }
-    return meshes;
+    return meshes
   }
 
 
-  resetUVs(geometry) {
-    if (geometry == undefined) return;
-    const pos = geometry.getAttribute("position"),
-      nor = geometry.getAttribute("normal"),
-      uvs = geometry.getAttribute("uv");
+  resetUVs(geometry: THREE.ExtrudeGeometry) {
+    if (geometry == undefined) return
+    const pos = geometry.getAttribute('position'),
+      nor = geometry.getAttribute('normal'),
+      uvs = geometry.getAttribute('uv')
 
     for (let i = 0; i < pos.count; i++) {
-      let x = 0, y = 0;
+      let x = 0, y = 0
 
-      const nx = Math.abs(nor.getX(i)), ny = Math.abs(nor.getY(i)), nz = Math.abs(nor.getZ(i));
+      const nx = Math.abs(nor.getX(i)), ny = Math.abs(nor.getY(i)), nz = Math.abs(nor.getZ(i))
 
       // if facing X
       if (nx >= ny && nx >= nz) {
-        x = pos.getZ(i);
-        y = pos.getY(i);
+        x = pos.getZ(i)
+        y = pos.getY(i)
       }
 
       // if facing Y
       if (ny >= nx && ny >= nz) {
-        x = pos.getX(i);
-        y = pos.getZ(i);
+        x = pos.getX(i)
+        y = pos.getZ(i)
       }
 
       // if facing Z
       if (nz >= nx && nz >= ny) {
-        x = pos.getX(i);
-        y = pos.getY(i);
+        x = pos.getX(i)
+        y = pos.getY(i)
       }
-      uvs.setXY(i, x, y);
+      uvs.setXY(i, x, y)
     }
   }