Three.js旋转方向异常：初始旋转设置后方向反转的原因及判定方法

Three.js采用右手坐标系，默认旋转方向为逆时针。比如执行以下代码：

group.rotation.y += Math.PI / 6

会让group绕Y轴逆时针旋转30°（对应默认状态下的旋转效果）。

但如果预先执行如下旋转设置：

group.rotation.set(Math.PI, 0, Math.PI, 'XYZ')

之后再执行相同的旋转代码，旋转方向看起来会变成顺时针（对应翻转后的旋转效果）。

原因分析 #

核心问题出在物体局部坐标系的翻转：

• group.rotation.set(Math.PI, 0, Math.PI, 'XYZ')是按XYZ顺序，先绕X轴转180°，再绕Z轴转180°。这组旋转会让物体的局部坐标系发生翻转——原本和世界坐标系同向的Y轴，会变成与世界Y轴完全反向。
• Three.js中修改rotation属性时，旋转是基于物体自身的局部坐标系计算的。此时从世界视角看，局部Y轴反向了，所以增加rotation.y的操作，在世界视角下就呈现出顺时针旋转的效果，但从物体自身局部坐标系的角度看，它依然是逆时针旋转。

准确判断旋转方向的方法 #

• 右手定则+局部坐标系：
  不管物体之前有多少旋转，伸出右手让拇指指向物体当前局部坐标系对应轴的正方向，其余四指弯曲的方向就是该轴的逆时针旋转方向。这是最本质的判断方式。
• 可视化局部坐标系：
  可以给物体添加AxesHelper来直观显示局部轴的朝向：

  const axesHelper = new THREE.AxesHelper(5); // 参数是轴的长度
  group.add(axesHelper);
  

  红色是X轴、绿色是Y轴、蓝色是Z轴，看着轴的朝向用右手定则就能快速判断。
• 用四元数替代欧拉角：
  欧拉角容易出现万向锁和视角歧义，若需要精确控制旋转，建议使用四元数：

  // 绕局部Y轴逆时针旋转30°，不受之前旋转的视角干扰
  group.quaternion.multiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/6));
  

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