update

src/pages/three/pointFace.vue

@@ -159,16 +159,55 @@ function createPoint(arr: { x: number, y: number, z: number, c: string }[], posi
 
 // 创建无角度单组多段炮孔路径
 function createHole(arr: { x: number, y: number, z: number, c: string, w: number }[], position = { x: -2.3, y: -3.5, z: 0 }) {
-  const group = new threeService.THREE.Group()
-  for (let k = 0; k < arr.length; k++) {
-    const el = arr[k]
-    const geometry = new threeService.THREE.CylinderGeometry(0.1, 0.1, el.w, 36)
-    const material = new threeService.THREE.MeshBasicMaterial({ color: new threeService.THREE.Color(el.c || '#000'), side: threeService.THREE.DoubleSide })
-    const cylinder = new threeService.THREE.Mesh(geometry, material)
-    cylinder.rotateX(Math.PI / 2)
-    cylinder.position.set(el.x, el.y, el.z)
-    group.add(cylinder)
+  const geometry = new threeService.THREE.CylinderGeometry(0.1, 0.1, 1, 36)
+  const material = new threeService.THREE.RawShaderMaterial({
+    vertexShader: `
+      attribute vec3 position;
+      uniform mat4 projectionMatrix;
+      uniform mat4 viewMatrix;
+      uniform mat4 modelMatrix;
+      attribute mat4 instanceMatrix;
+      attribute vec3 instanceColor;
+
+      varying vec3 vColor;
+
+      void main() {
+        vColor = instanceColor;
+        gl_Position = projectionMatrix * viewMatrix * instanceMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      precision highp float;
+      varying vec3 vColor;
+
+      void main() {
+        gl_FragColor = vec4(vColor, 1.0);
+      }
+    `,
+    uniforms: {},
+    transparent: false
+  })
+  const instancedMesh = new threeService.THREE.InstancedMesh(geometry, material, arr.length)
+  const color = new threeService.THREE.Color()
+  const matrix = new threeService.THREE.Matrix4()
+
+  for (let i = 0; i < arr.length; i++) {
+    const el = arr[i]
+    color.set(el.c)
+    instancedMesh.setColorAt(i, color.clone()) // 使用 clone()
+    // 设置矩阵
+    matrix.compose(
+      new threeService.THREE.Vector3(el.x + position.x, el.y + position.y, el.z + el.w / 2 + position.z),
+      new threeService.THREE.Quaternion().setFromEuler(new threeService.THREE.Euler(Math.PI / 2, 0, 0)),
+      new threeService.THREE.Vector3(1, el.w, 1)
+    )
+    instancedMesh.setMatrixAt(i, matrix.clone())
   }
+
+  instancedMesh.instanceColor!.needsUpdate = true // 明确更新颜色
+
+  const group = new threeService.THREE.Group()
+  group.add(instancedMesh)
   group.position.set(position.x, position.y, position.z)
   return group
 }