用途:处理 Three.js 中网格形状与顶点数据相关任务,包括几何体选择、自定义顶点属性生成、动态属性更新与实例化性能优化。表面外观交给 threejs-materials,图像/UV 资源交给 threejs-textures,整场景搭建交给 threejs-fundamentals。
主要能力:选择内置几何体、BufferGeometry、ShapeGeometry 或文本几何体;为自定义网格生成 positions、normals、colors、UVs 和 indices;安全更新动态属性并修复法线、绕序与剔除问题;在测量 draw call 成本后用 InstancedMesh 替换重复网格;用 EdgesGeometry/WireframeGeometry 做调试线框;提供几何体销毁管理。
基本用法:优先选择拓扑匹配的内置几何体;生成或导入顶点数据时用 BufferGeometry,旧版 Geometry 已非当前路径;顶点真正共享时才用索引几何体,接缝处法线、UV 或顶点色不同则不要索引。示例:const geometry = new THREE.BufferGeometry(); geometry.setAttribute("position", new THREE.Float32BufferAttribute([-1,-1,0, 1,-1,0, 0,1,0], 3)); geometry.setIndex([0,1,2]); geometry.computeVertexNormals(); geometry.computeBoundingSphere(); const mesh = new THREE.Mesh(geometry, material); 属性项大小需与语义匹配:位置/法线为 3,UV 为 2,颜色通常为 3。修改已上传 GPU 的属性后设置 attribute.needsUpdate = true,位置动态变化超出旧边界后需重算边界。实例化示例:const instances = new THREE.InstancedMesh(geometry, material, count); const matrix = new THREE.Matrix4(); for (let i = 0; i < count; i += 1) { matrix.makeTranslation(i * 2, 0, 0); instances.setMatrixAt(i, matrix); } instances.instanceMatrix.needsUpdate = true; 几何体不再被使用时调用 geometry.dispose(),替换后销毁旧几何体,缓存/共享几何体需等最后一个使用者释放。
适用场景:大量相同几何体/材质的副本、需要逐实例颜色或变换、大型静态地形或模型、海量微小粒子、调试边线或技术线框。
限制与注意:实例化是 draw call 优化手段,不能治愈昂贵着色器或过度精细的几何体;不同拓扑或材质应使用独立网格,不要强行实例化;仅在有实测瓶颈时使用性能工具;每帧重建大型几何体通常是缺陷,仅在测量支持时修改动态属性;坐标系统与单位需与场景一致,使用类型化数组,避免每帧用对象数组构建热顶点缓冲;仅在拓扑或位置需要时重算法线,不要每帧重算。