Three.js场景彻底移除所有对象的正确方法

问题分析与解决方案 #

我太懂这种挫败感了——Stack Overflow上翻遍类似的场景清理问题，试了各种方法都达不到预期，官方文档也没给出明确的标准方案，切换场景后内存越堆越多，卡顿感越来越明显，简直头大！

先看看你当前函数的几个核心问题：

• 类型判断逻辑错误：你用scene.children[0] == THREE.Mesh这种方式判断对象类型，这是拿实例和构造函数直接比较，永远不会成立，正确的做法应该用instanceof。
• 未递归处理嵌套对象：如果场景里有THREE.Group或者其他嵌套的Object3D，你的函数只会处理顶层对象，嵌套在里面的Mesh、几何体、材质根本没被清理，这是内存泄漏的关键原因。
• 清理顺序不合理：你先移除了对象，再尝试清理它的资源，但此时对象已经不在场景children里了，后续的dispose操作可能没生效。

正确的全场景清理方案 #

要彻底清理场景，需要递归遍历所有对象（包括嵌套的子对象），逐一释放几何体、材质、纹理等资源，最后再从场景中移除所有顶层对象。下面是完整的实现代码：

// 递归清理单个对象的所有资源
function disposeObject(obj) {
    // 处理几何体资源
    if (obj.geometry) {
        obj.geometry.dispose();
    }

    // 处理材质（兼容单个材质或材质数组的情况）
    if (obj.material) {
        const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
        materials.forEach(material => {
            // 清理材质关联的纹理
            if (material.map) material.map.dispose();
            // 清理材质本身
            material.dispose();
        });
    }

    // 递归处理子对象
    obj.children.forEach(child => disposeObject(child));
}

// 清理整个场景的所有对象和资源
function removeAllSceneObjects(scene) {
    // 先遍历顶层对象，递归清理资源后再移除
    while (scene.children.length > 0) {
        const child = scene.children[0];
        disposeObject(child);
        scene.remove(child);
    }
}

使用说明 #

当你需要切换场景时，只需要先调用removeAllSceneObjects(scene)，再执行你的场景创建函数（比如init()）。之后用renderer.info检测，你会发现对象数量和首次加载时一致，重复切换也不会再出现内存泄漏导致的卡顿问题。

额外注意点 #

• 如果你的场景里用到了自定义着色器、渲染目标（RenderTarget）等特殊资源，也要记得单独调用它们的dispose()方法。
• 如果你有全局引用的对象（比如函数外定义的Mesh变量），要记得把这些引用置为null，帮助垃圾回收器更快释放内存。

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