Three.js 资源释放工程实战：dispose、纹理与渲染器内存清单

文章目录一、为什么必须 dispose二、渲染器与画布三、纹理与 CubeTexture四、几何体与缓冲五、材质与程序六、渲染目标与后处理七、场景图遍历模板八、结语Three.js 在浏览器里不会自动做「垃圾回收」GPU 侧的纹理、缓冲、渲染目标与着色器程序都要靠你在合适的生命周期节点显式释放。本文给一份工程向清单帮助你在路由切换、热更新、资源热替换时少踩内存与 WebGL 上下文泄漏的坑。一、为什么必须 disposeJavaScript 对象 ≠ GPU 显存Texture、BufferGeometry、WebGLRenderTarget等会占用 WebGL 资源仅断开引用不会让驱动立刻回收。重复创建同一路由反复进入退出若只new不disposeChrome 内存与 GPU 进程会阶梯式上涨。上下文丢失低端设备或长时间运行后未释放资源会放大上下文丢失后的恢复成本。二、渲染器与画布切换页面或销毁 React/Vue 组件时建议顺序停掉动画循环cancelAnimationFrame。renderer.dispose()并renderer.forceContextLoss()可选视业务而定。移除canvasDOM解绑resize/pointer监听。functiondisposeRenderer(renderer){renderer.dispose();renderer.domElement.remove();}三、纹理与 CubeTexture对不再使用的Texture/DataTexture/CubeTexture调用texture.dispose()。若使用LoadingManager或自管缓存先查缓存再创建避免同 URL 重复解码上传。VideoTexture记得停视频元素并dispose()。四、几何体与缓冲BufferGeometrygeometry.dispose()释放索引与属性缓冲。合并网格merge或实例化前确认旧几何体已 dispose避免「合并后旧几何仍占显存」。五、材质与程序Materialmaterial.dispose()共享材质时注意引用计数式管理多处 mesh 共用时不要过早 dispose。自定义ShaderMaterial贴图与属性随材质走 disposeonBeforeCompile热修要谨慎避免残留宏组合。六、渲染目标与后处理WebGLRenderTargetrenderTarget.dispose()。EffectComposer与各 Pass查阅对应实现通常需对内部renderTarget、全屏四边形材质做释放不同版本 API 略有差异以当前 three 版本为准。七、场景图遍历模板工程里可封装一次深度遍历functiondisposeObject3D(root){root.traverse((obj){if(obj.geometry)obj.geometry.dispose();if(obj.material){constmatsArray.isArray(obj.material)?obj.material:[obj.material];mats.forEach((m){for(constkeyofObject.keys(m)){constvm[key];if(vtypeofv.disposefunction)v.dispose();}m.dispose?.();});}});}注意envMap、贴图字段名因材质类型而异遍历material键时配合dispose()是常见写法若团队有规范可改为白名单字段避免误伤非纹理属性。八、结语把dispose当作与init对称的契约谁在业务里创建了可释放资源谁就负责在卸载路径上释放。配合资源池/缓存、实例化与单例渲染器才能在复杂 Three.js 工程里把内存曲线压住。