Three.js中3D模型旋转失效求助：已声明全局变量仍无解

核心问题1：Model变量赋值时机错误 #

你在traverse循环内部赋值model = gltf.scene，这会导致只有遍历到Mesh节点时才会给model赋值。如果模型根节点不是Mesh，或者遍历先遇到非Mesh节点，model会处于未赋值状态，甚至被多次覆盖。正确做法是直接在加载回调外层赋值model：

let model;
gltfLoader.load("/models/a_greek_general.glb", (gltf) => {
  gltf.scene.traverse((node) => {
    if (!node.isMesh) return;
    // 替换材质
    node.material = new THREE.MeshLambertMaterial({ map: neon });
  });
  // 直接赋值整个场景给model
  model = gltf.scene;
  scene.add(model);
});

核心问题2：动画循环未判断Model是否加载完成 #

tick函数会在页面加载后立即执行，此时模型还在异步加载中，model是undefined，访问model.rotation.y会抛出错误，导致动画循环终止。需要在旋转前判断model是否存在：

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  const deltaTime = elapsedTime - previousTime;
  previousTime = elapsedTime;

  // 仅当model加载完成后执行旋转
  if (model) {
    model.rotation.y = 0.4 * elapsedTime;
  }

  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

额外优化建议 #

• 可给model设置初始位置或缩放，避免模型不在相机视野内导致看起来没旋转：

  model = gltf.scene;
  model.position.set(0, -1, 0); // 调整位置
  model.scale.set(0.5, 0.5, 0.5); // 调整缩放
  scene.add(model);
  

• 检查浏览器控制台是否有报错（比如neon纹理是否正确加载），资源加载错误也会导致模型显示异常。

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