基于Three.js与React切换GLTF模型可见性，视口无更新求助

DevOps 小满

2026-7-1

解决Three.js模型可见性切换后视口不更新的问题

你的代码存在核心逻辑错误，导致修改visible属性无法同步到视口：你创建了ceramicObj容器并将陶瓷模型添加到其中，但同时直接把陶瓷模型加入了scene，却从未将ceramicObj本身添加到场景。此时修改ceramicObj.visible只会改变一个不在渲染队列中的容器属性，完全不影响场景里的模型。

修复步骤

1. 修正模型添加逻辑

加载陶瓷模型时，仅将ceramicObj容器加入场景，而非直接添加模型：

loader.load(`/Models/ceramic.gltf`, (gltfScene) => {
  let ceramic = gltfScene.scene;
  ceramicObj.add(ceramic);
  console.log('loaded 1');
  // 移除这行：scene.add(ceramic);
  scene.add(ceramicObj); // 改为添加容器到场景
})

2. 用`useRef`稳定模型引用（React环境推荐）

直接使用全局变量可能因组件重渲染丢失引用，改用useRef保存模型容器：

// 替换原let ceramicObj = new THREE.Object3D();
const ceramicObjRef = useRef(new THREE.Object3D());

const testClick = () =>{
  console.log('click')
  console.log(ceramicObjRef.current)
  ceramicObjRef.current.visible = !ceramicObjRef.current.visible;
}

// 加载时使用current属性访问容器
loader.load(`/Models/ceramic.gltf`, (gltfScene) => {
  let ceramic = gltfScene.scene;
  ceramicObjRef.current.add(ceramic);
  console.log('loaded 1');
  scene.add(ceramicObjRef.current);
})

3. 状态驱动可见性（可选）

如果用React状态控制，需监听状态变更同步模型属性：

const [isCeramicVisible, setIsCeramicVisible] = useState(true);

const testClick = () =>{
  setIsCeramicVisible(!isCeramicVisible);
}

// 监听状态变化更新可见性
useEffect(() => {
  if(ceramicObjRef.current){
    ceramicObjRef.current.visible = isCeramicVisible;
  }
}, [isCeramicVisible])