Three.js中BufferGeometry索引循环更新失效及线框模式优化问题

首先得搞清楚为什么你之前的方法在非线框模式有效，但线框模式就失效了——当开启wireframe: true时，Three.js会在第一次渲染时根据你的索引生成线框的边数据，并把这些数据缓存到geometry.__webglwireframe这个内部属性里。后续你修改索引后，如果不清除这个缓存，引擎会直接复用旧的线框缓存，自然看不到更新效果。

下面是优化后的完整解决方案，不管线框模式开不开都能正常工作：

优化后的索引更新代码 #

function updateMeshIndices() {
    // 直接获取索引的原始数组，避免subarray的限制
    const indexAttribute = cube.geometry.getIndex();
    const indexArray = indexAttribute.array;

    // 根据切换状态修改索引值
    if (change_index) {
        indexArray[0] = 0; indexArray[1] = 1; indexArray[2] = 2;
        indexArray[3] = 2; indexArray[4] = 3; indexArray[5] = 0;
        change_index = false;
    } else {
        indexArray[0] = 4; indexArray[1] = 5; indexArray[2] = 6;
        indexArray[3] = 6; indexArray[4] = 7; indexArray[5] = 4;
        change_index = true;
    }

    // 标记索引属性需要更新
    indexAttribute.needsUpdate = true;
    // 清除线框缓存，强制引擎重新生成线框数据
    delete cube.geometry.__webglwireframe;
    // 确保绘制范围正确
    cube.geometry.setDrawRange(0, 6);
}

关键优化点说明 #

• 直接操作原始索引数组：不再使用subarray，直接获取indexAttribute.array来修改，这样能确保修改的是真正的底层数据，避免子数组的限制。
• 清除线框缓存：手动删除__webglwireframe这个内部缓存属性，让Three.js在下一次渲染时重新根据最新的索引生成线框边数据。
• 正确标记更新：设置needsUpdate = true告诉引擎索引数据已经修改，需要重新上传到GPU。

额外提示 #

• 尽量不要频繁创建新的BufferAttribute或者重新设置索引，复用原始数组的方式性能更好。
• 如果你的索引长度后续会动态变化，除了设置needsUpdate，还要同步修改indexAttribute.count的值，不过你这里固定绘制6个索引，所以不用额外处理。

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