如何在Three.js中清理GPU中BufferAttribute数据且不影响其他属性？

核心解决方案 #

调用deleteAttribute后，必须手动调用对应BufferAttribute的dispose()方法，才能真正释放GPU端的缓冲资源：

// 先获取目标属性
const targetAttr = geometry.getAttribute('xxx');
if (targetAttr) {
  // 释放底层WebGL缓冲
  targetAttr.dispose();
  // 从几何体属性列表中移除
  geometry.deleteAttribute('xxx');
  // 标记几何体需要更新
  geometry.needsUpdate = true;
}

为什么直接deleteAttribute没用？ #

geometry.deleteAttribute('xxx')只是把属性从几何体的attributes对象中移除，但Three.js的BufferAttribute内部持有WebGLBuffer的引用，只要这个引用没被销毁，WebGL上下文就不会主动回收GPU端的内存。只有调用dispose()，才会通知WebGL释放对应的缓冲资源。

额外注意事项 #

• GPU内存回收是异步的：即使调用了dispose()，浏览器也不会立刻释放内存，要等WebGL的垃圾回收周期触发，所以内存不会瞬间下降。
• 优先复用属性：如果是频繁动态切换属性的场景，建议复用已有的BufferAttribute（通过修改其array数据并设置needsUpdate=true），比反复创建删除性能更高。
• 检查额外引用：确保你的代码中没有其他变量缓存了这个BufferAttribute，否则即使调用dispose()，引用依然存在，内存还是无法释放。

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