Threejs的InstancedMesh

InstancedMesh是 Three.js 中用于高效渲染大量相同几何体和材质的对象的核心类。它通过单次绘制调用（Draw Call）完成所有实例的渲染，大幅提升性能。

一、核心概念与创建

const mesh = new THREE.InstancedMesh(geometry, material, count);

• geometry：共享的几何体（BufferGeometry类型）。
• material：共享的材质（Material类型）。
• count：实例的最大数量（创建后不可修改）。

二、设置实例属性

1.位置与旋转（通过矩阵控制）

const matrix = new THREE.Matrix4(); // 创建一个4x4变换矩阵 const position = new THREE.Vector3(1, 0, 0); // 实例的位置 const quaternion = new THREE.Quaternion(); // 旋转四元数 const scale = new THREE.Vector3(1, 1, 1); // 缩放 matrix.compose(position, quaternion, scale); // 组合变换 mesh.setMatrixAt(index, matrix); // 应用到第 index 个实例 mesh.instanceMatrix.needsUpdate = true; // 必须更新标记！

2.设置颜色

const color = new THREE.Color(0xff0000); // 红色 mesh.setColorAt(index, color); // 设置第 index 个实例颜色 mesh.instanceColor.needsUpdate = true; // 必须更新标记！

• 需启用顶点着色器中的颜色插值（材质属性vertexColors: true）。

三、完整示例代码

// 1. 创建几何体与材质 const geometry = new THREE.IcosahedronGeometry(0.5, 5); // 二十面体 const material = new THREE.MeshPhongMaterial({ color: 0xffffff, vertexColors: true // 允许实例化颜色 }); // 2. 创建1000个实例 const count = 1000; const instancedMesh = new THREE.InstancedMesh(geometry, material, count); // 3. 为每个实例设置位置和颜色 const matrix = new THREE.Matrix4(); const color = new THREE.Color(); for (let i = 0; i < count; i++) { // 位置随机偏移 matrix.setPosition( Math.random() * 10 - 5, Math.random() * 10 - 5, Math.random() * 10 - 5 ); instancedMesh.setMatrixAt(i, matrix); // 颜色随机 color.setHex(Math.random() * 0xffffff); instancedMesh.setColorAt(i, color); } // 4. 标记属性更新 instancedMesh.instanceMatrix.needsUpdate = true; instancedMesh.instanceColor.needsUpdate = true; // 5. 添加到场景 scene.add(instancedMesh);

四、关键注意事项

1. 性能优化

   • 避免在动画循环中频繁更新矩阵或颜色，仅在初始化或变化时更新。
   • 超过千级数量时性能优势显著，少量对象无需使用。

2. 限制

   • 所有实例共享同一几何体和材质，无法单独修改。
   • 创建后count不可更改（需重新创建实例化网格）。

3. 常见错误

   • 忘记设置needsUpdate = true（矩阵/颜色不会生效）。
   • 未启用材质的vertexColors导致颜色失效。