如何在 Three.js 中移除场景中的 OBJ 模型

本文介绍如何在 three.js 中动态移除已加载的 obj 模型，包括设置 visible = false 隐藏模型和调用 scene.remove() 彻底从场景中删除对象，并提供可直接集成到现有代码的完整示例。

在 Three.js 中，移除一个已添加到场景（THREE.Scene）中的 3D 对象（如通过 OBJLoader 加载的模型）非常简单，但关键在于必须持有对该对象的引用。你当前的代码中，loader.load() 的回调函数内直接调用了 scene.add(object)，但未将 object 保存为全局或模块级变量，导致后续无法访问它——这是初学者最常见的“找不到对象可删”的根本原因。

✅ 正确做法：保存引用 + 移除/隐藏

你需要做两件事：

1. 保存加载完成的对象引用（例如赋值给一个 let loadedObj = null 变量）；
2. 在按钮点击（或 GUI 操作）时，调用 scene.remove(loadedObj) 或设置 loadedObj.visible = false。

以下是对你原始代码的关键修改部分（仅展示需改动/新增的逻辑，其余结构保持不变）：

// ? 新增：声明可被全局访问的模型引用变量
let loadedObj = null;
let loadedObj2 = null; // 若需管理多个模型，也建议分别声明

// 修改 loadtavel 函数：保存引用
function loadtavel() {
    loader.load(
        'assets/objtest.obj',
        function (object) {
            scene.add(object);
            loadedObj = object; // ✅ 保存引用！
        },
        (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
        (error) => console.error('OBJ load error:', error)
    );
}

// 修改第二个加载逻辑（untitled.obj），同样保存引用
loader.load(
  
  'assets/untitled.obj',
    function (object) {
        scene.add(object);
        object.translateY(10);
        loadedObj2 = object; // ✅ 保存第二个模型引用
    },
    (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% loaded'),
    (error) => console.error('OBJ load error:', error)
);

// ? 新增：移除函数（以 loadedObj 为例）
function removeLoadedObj() {
    if (loadedObj && scene.children.includes(loadedObj)) {
        scene.remove(loadedObj);
        console.log('OBJ removed from scene');
        loadedObj = null; // ? 建议置空，避免重复移除报错
    }
}

// ? 可选：仅隐藏（不从 scene 移除，性能开销更小）
function hideLoadedObj() {
    if (loadedObj) {
        loadedObj.visible = false;
        console.log('OBJ hidden');
    }
}

// 更新 GUI 控制项（绑定到新函数）
const obj = { add: loadtavel };
const obj2 = { remove: removeLoadedObj }; // 注意：这里改用 remove 方法名更语义化

const gui = new GUI();
const cubeFolder = gui.addFolder('Model Control');
cubeFolder.add(obj, 'add').name('Load OBJ');
cubeFolder.add(obj2, 'remove').name('Remove OBJ'); // ? 点击即触发移除
cubeFolder.open();

⚠️ 重要注意事项

• scene.remove() 是单向操作：移除后对象不再参与渲染、碰撞检测或更新逻辑；若需再次显示，必须重新加载或提前缓存并 scene.add() 回来。
• visible = false 更轻量：适合频繁切换显示/隐藏的场景（如 UI 交互），不涉及内存释放，但对象仍保留在 scene.children 中。
• 确保对象存在且属于 scene：调用 scene.remove() 前务必检查 if (obj && scene.children.includes(obj))，否则可能引发静默失败或警告。
• 材质与几何体不会自动销毁：scene.remove() 不会释放 GPU 内存；如需彻底清理（如切换大量模型），应手动调用 geometry.dispose() 和 material.dispose()（本例中因是初学者项目，通常可忽略，但大型应用需注意）。

✅ 总结

移除 OBJ 的核心不是“找 API”，而是管理好对象生命周期：加载时存引用 → 交互时查引用 → 移除前做校验 → 清理后重置引用。掌握这一模式，你不仅能删除 OBJ，还能轻松控制任意 THREE.Object3D 子类（如 Mesh、Group、Line 等）的显隐与增删。

现在，点击 GUI 中的 “Remove OBJ” 按钮，模型将立即从画面中消失——你已迈出 Three.js 动态场景控制的第一步。