本文介绍如何在 three.js 中动态移除已加载的 obj 模型，包括设置 visible = false 隐藏模型和调用 scene.remove() 彻底从场景中删除对象，并提供可直接集成到现有代码的完整示例。
在 Three.js 中，移除一个已添加到场景（THREE.Scene）中的 3D 对象（如通过 OBJLoader 加载的模型）非常简单，但关键在于必须持有对该对象的引用。你当前的代码中，loader.load() 的回调函数内直接调用了 scene.add(object)，但未将 object 保存为全局或模块级变量，导致后续无法访问它——这是初学者最常见的“找不到对象可删”的根本原因。
✅ 正确做法：保存引用 + 移除/隐藏
你需要做两件事：
- 保存加载完成的对象引用（例如赋值给一个 let loadedObj = null 变量）；
- 在按钮点击（或 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 动态场景控制的第一步。
