three.js - X和Z轴的ThreeJS旋转做相同的旋转但方向不同

Question

据我所知，通过 object.rotation.x/object.rotation.y/object.rotation.z 设置的所有旋转无论对象在场景中的位置如何，都相对于对象的轴应用。

但是在下面的代码中，我设置了简单的旋转值 box.rotation.y = PI/2box.rotation.x 的所有后续更改似乎不是在 Box X Axis 上旋转，而是在 Box Z Axis 轴上旋转

如果我改变 box.rotation.z 它仍然会在 Box Z Axis 上旋转，只是朝另一个方向旋转。

所以基本上问题是 - Box X Axis 和 Box Z Axis 进行相同的旋转，但方向不同。

我在这里做错了什么？我如何在这里正确使用旋转，例如如果我想在 Box Y Axis 旋转后应用 Box Z Axis 旋转。

我在这里创建了沙箱来重现这个问题 https://stackblitz.com/edit/trhee-js-plane-rotation?file=index.js

Answer 1

你遇到了万向节锁，所以你需要 to use Quaternions实现你想要的旋转。首先你需要set each quat from axis angle , 那么你必须 multiply them together以获得所需的旋转。

const xAxis = new THREE.Vector3(1, 0, 0);
const xRot = -Math.PI;
const xQuaternion = new THREE.Quaternion();
xQuaternion.setFromAxisAngle( xAxis, xRot );

const yAxis = new THREE.Vector3(0, 1, 0);
const yRot = Math.PI / 2;
const yQuaternion = new THREE.Quaternion();
yQuaternion.setFromAxisAngle( yAxis, yRot );

box.quaternion.multiplyQuaternions(xQuaternion, yQuaternion);

您也可以使用与上述相同的方法添加一个 z-四元数，只需确保所有 3 个四元数在最后都相乘即可。