Three.js相机Y轴旋转插值异常问题求助

问题核心分析 #

你遇到的两个问题本质上都是欧拉角的周期性/旋转顺序特性导致的：

1. 直接补间camera.rotation.y时，90-270度区间出现异常，是因为欧拉角的数值是循环的（比如270°等价于-90°），Tween.js会默认走数值最短路径插值，导致相机旋转方向反转，出现镜像/偏移。
2. Blender和Three.js的旋转数值差异，是因为两者默认的欧拉角旋转顺序不同：Blender用ZYX，Three.js默认用XYZ，GLTF导出时会自动转换旋转结果保证视觉一致，但数值会有差异。

解决方案1：改用四元数（Quaternion）补间旋转（推荐） #

四元数能完美避免欧拉角的万向锁和角度环绕问题，插值更平滑自然，是Three.js中处理旋转动画的最佳实践。

具体实现步骤：

• 记录相机的初始四元数：

  const startQuat = camera.quaternion.clone();
  

• 定义目标旋转（可以从Blender导出的旋转值转换，或者直接设置目标欧拉角再转四元数）：

  // 比如目标旋转是Blender导出的226°Y轴旋转，先转成欧拉角（注意匹配Blender的ZYX顺序）
  const targetEuler = new THREE.Euler(0, THREE.MathUtils.degToRad(226), 0, 'ZYX');
  const targetQuat = new THREE.Quaternion().setFromEuler(targetEuler);
  

• 使用Tween.js补间四元数的四个分量：

  new TWEEN.Tween(startQuat)
    .to(targetQuat, 1500)
    .onUpdate(() => {
      camera.quaternion.copy(startQuat);
    })
    .start();
  

解决方案2：修复欧拉角插值的角度环绕问题（如果坚持用欧拉角） #

如果必须直接操作rotation.y，需要手动修正目标角度，确保插值走正确的旋转路径，而不是数值最短路径：

// 修正角度，确保插值差值在[-π, π]范围内
function normalizeAngleDelta(current, target) {
  let delta = target - current;
  // 如果差值超过180°，调整目标角度到等价的另一侧
  if (delta > Math.PI) delta -= 2 * Math.PI;
  if (delta < -Math.PI) delta += 2 * Math.PI;
  return current + delta;
}

// 使用示例
const currentY = camera.rotation.y;
const targetY = THREE.MathUtils.degToRad(226); // 你的目标Y轴旋转弧度
const fixedTargetY = normalizeAngleDelta(currentY, targetY);

new TWEEN.Tween(camera.rotation)
  .to({ y: fixedTargetY }, 1500)
  .start();

解决Blender与Three.js旋转数值差异问题 #

如果需要让两者的旋转数值对应，可以：

1. 在Blender中把物体的旋转顺序改成XYZ（和Three.js默认一致），再导出GLTF，此时数值会更匹配。
2. 在Three.js中手动指定欧拉角的旋转顺序来匹配Blender：

   // 从网格的四元数反推Blender风格的ZYX欧拉角
   const blenderStyleEuler = new THREE.Euler().setFromQuaternion(mesh.quaternion, 'ZYX');
   console.log(THREE.MathUtils.radToDeg(blenderStyleEuler.y)); // 这会和Blender里的Y轴旋转数值一致
   

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