Three.js BufferGeometry更新索引添加面的实现方法

为什么直接改索引数组、设置needsUpdate = true不生效 #

核心是两个容易踩的坑：

• 数据源格式不符合要求：Three.js的BufferAttribute底层对接WebGL缓冲区，只认类型化数组（TypedArray），最初定义索引用的普通JS数组new Array(100 * 3)，哪怕手动赋值给geometry.index，WebGL也读不到里面的数据，自然不会渲染对应的面。
• 更新标记的适用场景有限：geometry.index.needsUpdate = true仅在索引数组总长度固定、只修改已有位置的索引值时生效。如果是新增面（索引数量变多），WebGL初始化索引缓冲区（EBO）时分配的显存大小是固定的，仅打更新标记不会重新分配显存，新增的索引数据根本传不到GPU。

测试通过的写法生效原理 #

这段可运行的代码是符合官方规范的标准实现：

const indices = new Uint16Array(100 * 3);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

它能正常工作的原因是：

• Uint16Array是Three.js索引默认支持的类型化数组，单个索引值占2字节，最多支持索引65535个顶点，满足绝大多数常规场景的格式要求，能被WebGL直接识别。
• setIndex不是简单给geometry对象挂载index属性，方法内部会自动完成旧索引缓冲区销毁、新BufferAttribute绑定、显存分配、全量数据上传到GPU的全流程。只要后续新增面时，索引总长度不超过初始化时预分配的数组大小（也就是定义的100*3），修改完数组内容后再设置geometry.index.needsUpdate = true就能正常触发更新。

额外使用注意事项 #

如果后续需要添加的面数量超过了初始化时预分配的数组长度，不要直接扩容原类型化数组，需要重新调用setIndex传入容量更大的类型化数组完成缓冲区重分配，否则会出现数组越界、面丢失的问题。如果场景顶点总数会超过65535，把索引数组换成Uint32Array即可。

内容的提问来源于stack exchange，提问作者tour77