极致优化, InstanceMesh 矩阵

src/components/ThreePerfView.vue

@@ -180,7 +180,7 @@ function test2() {
 }
 
 /**
- * BufferGeometry
+ * BufferGeometry + Label
  */
 function test3() {
   cleanupThree()
@@ -190,6 +190,19 @@ function test3() {
   const spacing = dist
   const y = 0.1
 
+
+  const noShaderMaterial = new THREE.MeshBasicMaterial({
+    color: 0xFFFF99,
+    transparent: true,
+    depthWrite: false,
+    side: THREE.DoubleSide
+  })
+  const planeGeometry = new THREE.PlaneGeometry(0.25, 0.25) // 设置大小
+
+  const instancedMesh = new THREE.InstancedMesh(planeGeometry, noShaderMaterial, zcount * xcount)
+  instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage)
+  const dummy = new THREE.Object3D()
+
   const points = []
 
   // 创建所有点
@@ -197,17 +210,44 @@ function test3() {
     for (let x = 0; x < xcount; x++) {
       const px = x * dist
       const pz = z * dist
-      const point = new THREE.Sprite(pointMaterial)
+
-      point.position.set(px, y, pz)
+      dummy.position.set(px, y, pz)
-      point.scale.set(0.25, 0.25, 1) // 设置大小
+      dummy.rotation.set(-Math.PI / 2, 0, 0) // 假设你想让平面朝上，相当于面对相机视角的一部分
-      scene.add(point)
+      dummy.updateMatrix()
-      points.push(point.position.clone())
+      instancedMesh.setMatrixAt(z * xcount + x, dummy.matrix)
+
+      points.push(new THREE.Vector3(px, y, pz))
     }
   }
+  scene.add(instancedMesh)
 
   const positions = []
   const labels = []
 
+  function createTextLabel(text, position) {
+    const label = new Text()
+    label.text = text
+    label.font = SimSunTTF
+    label.fontSize = 0.2
+    label.color = '#333333'
+    label.opacity = 0.8
+    label.padding = 0.2
+    label.anchorX = 'center'
+    label.anchorY = 'middle'
+    label.depthOffset = 1
+    label.backgroundColor = '#000000'
+    label.backgroundOpacity = 0.6
+    label.material.depthTest = false
+    label.position.copy(position)
+    label.name = MeasureRenderer.LABEL_NAME
+
+    label.position.set(position.x, position.y + 0.3, position.z - 0.2)
+    label.quaternion.copy(camera.quaternion)
+    label.sync()
+
+    return label
+  }
+
   // 横向连接（右）
   for (let z = 0; z < zcount; z++) {
     for (let x = 0; x < xcount - 1; x++) {
@@ -250,34 +290,11 @@ function test3() {
   lineSegments.name = 'grid-lines'
   scene.add(lineSegments)
 
-  labels.forEach(label => scene.add(label))
+  // labels.forEach(label => scene.add(label))
 
   refreshCount()
 }
 
-function createTextLabel(text, position) {
-  const label = new Text()
-  label.text = text
-  label.font = SimSunTTF
-  label.fontSize = 0.2
-  label.color = '#333333'
-  label.opacity = 0.8
-  label.padding = 0.2
-  label.anchorX = 'center'
-  label.anchorY = 'middle'
-  label.depthOffset = 1
-  label.backgroundColor = '#000000'
-  label.backgroundOpacity = 0.6
-  label.material.depthTest = false
-  label.position.copy(position)
-  label.name = MeasureRenderer.LABEL_NAME
-
-  label.position.set(position.x, position.y + 0.3, position.z - 0.2)
-  label.quaternion.copy(camera.quaternion)
-  label.sync()
-
-  return label
-}
 
 const restate = reactive({
   targetColor: '#ff0000',
@@ -382,7 +399,10 @@ function initThree() {
   statsControls.dom.style.left = 'auto'
   viewerDom.appendChild(statsControls.dom)
 
-  animate()
+  renderer.setAnimationLoop(renderView)
+  renderer.setClearColor(0x000000, 0)
+
+  // animate()
 }
 
 // 动画循环