Three.js中物体绕X/Y轴旋转异常问题及解决与重置方法

问题场景 #

我尝试让物体同时绕Y轴和X轴旋转，但遇到了诡异的问题：当movement（X轴旋转增量）或angle（Y轴旋转值）其中一个为0时，旋转完全正常；但两者都不为0时，旋转就彻底失效了。我试过用四元数、旋转向量相乘的方式来处理，都没解决问题。

有效解决方案 #

方案1：世界轴旋转结合轴向量转换

通过先转换旋转轴，再结合世界轴旋转的方式实现复合旋转，代码示例如下：

angleX += movement;
[wheel1, wheel2].forEach(function (wheel) {
    // 定义基础X轴向量，再绕Y轴旋转得到适配后的旋转轴
    let vector = new THREE.Vector3(1, 0, 0);
    vector.applyAxisAngle(new THREE.Vector3(0, 1, 0), angleY);
    
    // 重置自身旋转→设置Y轴旋转→绕转换后的世界轴执行X轴旋转
    wheel.rotation.y = angleY;
    wheel.rotation.x = 0;
    wheel.rotation.z = 0;
    wheel.rotateOnWorldAxis(vector, angleX);
});

方案2：修改物体旋转顺序

这是评论区提供的更简洁方案：直接修改物体的rotation.order为'YXZ'，让Three.js按照Y→X→Z的顺序计算旋转，就能正常处理同时绕X、Y轴的旋转需求：

// 初始化时设置一次即可
wheel1.rotation.order = 'YXZ';
wheel2.rotation.order = 'YXZ';

// 之后直接设置旋转值就会正常生效
wheel1.rotation.x += movement;
wheel1.rotation.y = angle;

附加问题：旋转物体后重置旋转状态为零 #

要把物体的旋转状态重置为初始的零旋转，有两种简单方式：

• 直接重置旋转属性：

  wheel1.rotation.set(0, 0, 0);
  

• 如果用四元数管理旋转，也可以重置四元数：

  wheel1.quaternion.set(0, 0, 0, 1);
  

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