Three.js中3D模型轨道运动时替换几何体后模型消失问题排查

你直接从gltfScene.scene获取geometry和material是错误的——THREE.Scene对象本身没有这两个属性，它只是一个容纳模型、灯光等元素的容器，里面的3D模型是以Mesh（或其他Object3D子类）的形式存在于scene.children中的。你之前用BoxGeometry能正常显示是因为手动创建了有效的几何体和材质，而现在用undefined的geometry/material创建Mesh，自然不会渲染出任何内容。

正确的实现方式 #

方式1：直接复用加载后的模型Mesh #

不需要重新创建Mesh，直接把加载好的模型添加到pivot上：

// 遍历GLTF场景，找到所有Mesh（处理嵌套模型的情况）
function traverseScene(scene, callback) {
  scene.traverse((child) => {
    if (child.isMesh) {
      callback(child);
    }
  });
}

// 在GLTFLoader的回调里
let pivot = new THREE.Object3D();
pivot.rotation.z = 0;
gltfScene.scene.add(pivot);

traverseScene(gltfScene.scene, (mesh) => {
  // 复制模型（避免修改原场景的模型）
  const clonedMesh = mesh.clone();
  clonedMesh.position.y = 2;
  // 调整缩放（如果模型大小不合适）
  clonedMesh.scale.set(1, 1, 1);
  pivot.add(clonedMesh);
});

方式2：提取模型的几何体和材质创建新Mesh #

如果确实需要重新创建Mesh，要从场景中的Mesh对象里取geometry和material：

let pivot = new THREE.Object3D();
pivot.rotation.z = 0;
gltfScene.scene.add(pivot);

// 找到第一个Mesh（如果模型结构简单，只有一个Mesh）
const originalMesh = gltfScene.scene.children.find(child => child.isMesh);
if (originalMesh) {
  // 注意：如果模型有多个材质，需要用originalMesh.material数组
  const mesh = new THREE.Mesh(originalMesh.geometry, originalMesh.material);
  mesh.position.y = 2;
  // 按需调整缩放
  mesh.scale.set(0.5, 0.5, 0.5);
  pivot.add(mesh);
}

关于缩放的问题 #

如果模型显示异常（比如太大/太小看不见），可以通过调整mesh.scale来修正。加载的GLTF模型可能自带缩放，你可以打印originalMesh.scale查看默认值，再调整到合适的大小。

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