如何从Three.js场景中移除OBJ模型？

要实现点击按钮移除场景中的OBJ模型，核心是先保存加载后的模型实例，再通过Three.js的API完成移除和内存清理，具体步骤如下：

1. 全局保存模型实例 #

在代码顶部的全局作用域声明变量，用来存储加载完成的OBJ模型：

let loadedObjModel = null; // 存储加载后的OBJ模型实例

2. 加载模型时赋值给全局变量 #

找到你用OBJLoader加载模型的代码，在将模型添加到场景后，把模型实例赋值给上面的全局变量：

// 示例加载代码
const loader = new THREE.OBJLoader();
loader.load('你的模型路径.obj', function(obj) {
    scene.add(obj); // 将模型添加到场景
    loadedObjModel = obj; // 把模型实例存入全局变量
});

3. 实现removeLoad函数 #

在绑定到Unload按钮的removeLoad函数中，执行移除和内存清理操作：

function removeLoad() {
    // 先检查模型是否存在，避免报错
    if (loadedObjModel) {
        // 从场景中移除模型
        scene.remove(loadedObjModel);
        
        // 遍历模型所有子物体，清理几何体和材质（防止内存泄漏）
        loadedObjModel.traverse(function(child) {
            if (child.geometry) child.geometry.dispose();
            if (child.material) {
                // 处理材质数组的情况（比如多材质模型）
                Array.isArray(child.material) 
                    ? child.material.forEach(m => m.dispose()) 
                    : child.material.dispose();
            }
        });
        
        // 清空变量，方便后续判断
        loadedObjModel = null;
    }
}

关键提示 #

• 若你的OBJ模型包含多个子网格（比如由多个Mesh组成），traverse方法会遍历所有层级的子物体，确保每个部件的资源都被正确释放。
• 必须先判断loadedObjModel不为空再执行操作，避免出现“Cannot read properties of null”类的错误。

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