Three.js中GLB模型自动绕Y轴旋转遇缩放异常及替代方案咨询

一、修复自动缩放异常问题 #

你的自动缩放异常大概率是animate函数中错误修改了模型/相机的缩放属性，或是和OrbitControls的逻辑冲突导致的。按以下步骤排查修复：

1. 严格分离自动旋转与交互逻辑
   确保animate函数只负责模型的自动旋转，绝对不要触碰scale相关属性。把用户交互的缩放、旋转完全交给OrbitControls处理。

   正确的animate函数示例：

   function animate() {
     requestAnimationFrame(animate);
     // 仅处理绕Y轴自动旋转，速度可自行调整
     if (model) {
       model.rotation.y += 0.005;
     }
     // 必须调用此方法让OrbitControls同步用户交互
     controls.update();
     renderer.render(scene, camera);
   }
   

2. 检查OrbitControls配置
   确认控件配置没有冲突，确保只开启需要的交互项：

   const controls = new OrbitControls(camera, renderer.domElement);
   controls.enableZoom = true;    // 允许鼠标缩放
   controls.enableRotate = true;  // 允许鼠标旋转
   controls.enableDamping = true; // 可选，增加交互平滑度
   controls.dampingFactor = 0.05;
   

3. 排查其他代码中的缩放修改
   检查模型加载完成后的初始化代码、其他事件回调，确保没有误写model.scale.x += ...或camera.scale这类会累积的缩放逻辑。

二、CSS/Tailwind实现自动旋转的可行性 #

可以用CSS/Tailwind实现视觉上的旋转，但不推荐，原因如下：

• 用CSS旋转的是整个<canvas>元素，而非Three.js场景内的3D模型。比如：
  普通CSS写法：

  canvas {
    animation: rotateY 20s linear infinite;
  }
  @keyframes rotateY {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
  }
  

  Tailwind写法：

  <canvas class="animate-[rotateY_20s_linear_infinite]"></canvas>
  

• 这种方式会导致鼠标交互完全失效：OrbitControls是基于3D场景坐标计算的，而CSS旋转是2D视觉变换，鼠标拾取的位置和模型实际位置不匹配，用户缩放、旋转操作会出现严重的错位问题。

因此，还是建议在Three.js内部处理模型的自动旋转，既能保证交互正常，也能获得更精准的3D控制效果。

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