PERFORMANCE · Vite + three
场景资源释放巡检Dispose and memory audit
切换场景或卸载时遍历 scene,dispose geometry/material/texture,并打印残留统计。
效果预览
轻量 WebGL 示意(非完整工程实现),可拖拽旋转;完整逻辑见下方提示词。
预期产出 · Returns
工具函数 disposeScene(scene) + 示例:按钮加载/卸载两个不同 glTF 或 group,控制台输出 dispose 日志。
适合用在哪
单页多场景切换、HMR 开发时内存上涨、准备上生产前的排查。
容易踩的坑
- 只 dispose mesh 不 dispose 纹理会泄漏 GPU 内存。
- 共享 material 被多处引用时勿重复 dispose。
提示词 · Prompt
在 Vite + Three.js 项目中实现资源释放工具:
1) 函数 disposeScene(root: Object3D):递归遍历,对 Mesh 调用 geometry.dispose(),对 material(数组则逐项)dispose map/normalMap 等纹理;
2) 提供 loadSceneA / unloadSceneA 演示:两个按钮切换不同 Group(可用简单几何体代替 glTF);
3) 卸载后 renderer.info.memory 或自定义计数打印到 console;
4) 注释说明 WebGLRenderer.dispose() 何时需要调用;
5) 给出 TypeScript 类型可选但非必须。
输出 utils/dispose.js 与改动后的 main.js。
Implement disposeScene(root) traversing geometries/materials/textures; demo load/unload groups; log renderer.info.memory.