Three.js 工程向：实例化渲染 InstancedMesh 的批量优化

文章目录

• • [一、何时使用 InstancedMesh](#一、何时使用 InstancedMesh)
  • 二、基础结构
  • 三、工程要点
  • 四、功能边界
  • 五、结语

一、何时使用 InstancedMesh

当场景里有大量同材质同几何对象（树、路灯、子弹）时，InstancedMesh 可显著减少 draw call。

二、基础结构

const mesh = new THREE.InstancedMesh(geometry, material, count);
for (let i = 0; i < count; i++) {
  matrix.compose(pos[i], quat[i], scale[i]);
  mesh.setMatrixAt(i, matrix);
}
mesh.instanceMatrix.needsUpdate = true;

三、工程要点

• 预分配实例数，避免频繁重建。
• 动态实例只更新脏区索引，减少整批更新开销。
• 结合 frustum culling 分块，避免无效绘制。

四、功能边界

单实例交互、差异化材质较复杂，必要时拆分多个 InstancedMesh。

五、结语

InstancedMesh 的核心收益是"CPU 提交成本下降"，适合海量重复对象场景。