Three.js r154内存释放方案咨询：渲染多物体时内存未释放致卡顿

核心排查方向 #

• 引用没清干净：哪怕调用了dispose()，只要对象还被全局变量、数组、闭包或者场景树的某个分支攥着，垃圾回收器就拿它没办法。重点查：
  • 全局数组、对象池有没有留着废弃对象的引用，比如存Mesh的全局数组没清空
  • 场景/组里是不是还有没移除的子节点——比如复制粘贴后，旧对象没从场景remove就直接dispose，场景还攥着它的引用
  • 事件监听器没解绑：给物体绑的pointermove、click这类事件，对象销毁后没移除监听，监听器会一直攥着对象
• Geometry/BufferGeometry的细节遗漏：用BufferGeometry的话，除了dispose()，要确认自定义的attributes没被其他对象拿着；旧版Geometry转成BufferGeometry后，原对象有没有彻底删掉
• Material的隐藏引用：如果多个Mesh共享同一个Material，得等所有用这个Material的Mesh都销毁后再dispose；另外Material里的uniforms如果引用了Texture或其他对象，这些引用也要清掉
• Texture的额外残留：除了dispose()，还要检查创建Texture用的img元素、ImageBitmap有没有被其他地方存着没删，比如缓存里的图片对象没清空
• 复制粘贴的逻辑bug：复制时是不是生成了一堆重复的Geometry/Material，粘贴后旧对象没被正确清理；比如新对象加进场景了，旧对象却没从场景移除，还在后台被渲染

实操步骤 #

1. 用浏览器DevTools定位残留：打开Memory面板，手动触发垃圾回收（垃圾桶图标），对比前后内存快照，看哪些Three.js对象（Mesh、Geometry这类）没被回收，顺着引用链找是谁在攥着它们
2. 场景清理要按顺序来：销毁物体时，先scene.remove(mesh)，再依次mesh.material.dispose()、mesh.geometry.dispose()（如果是自定义Texture也要dispose），最后把mesh = null
3. 解绑事件监听：给物体绑过事件的，销毁前一定要mesh.removeEventListener()，或者干脆用事件委托，别直接绑到单个物体上
4. 别滥用全局缓存：如果有全局的对象缓存数组，用完就清空，比如window.meshCache.length = 0再window.meshCache = null
5. 检查渲染循环：确保渲染循环里没在不停创建新对象，也没把废弃对象留在渲染队列里——比如复制粘贴后，旧对象还在被渲染
6. 用WeakMap/WeakSet存引用：要是必须存物体引用，别用普通数组/对象，用WeakMap或WeakSet，它们不会阻止GC回收对象

容易踩的坑 #

• 只dispose不移除场景引用：只要对象在场景树里，渲染循环就会一直引用它，GC根本收不了
• 共享Material时提前dispose：多个Mesh共用的Material，得等所有Mesh都销毁了再dispose，不然会导致渲染异常还留内存
• 忘了清自定义属性：比如给Mesh加了mesh.userData.myRef = someObj，销毁时要把mesh.userData.myRef = null

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