ThreeJS 通过 X 轴和 Z 轴进行旋转，但方向不同

Question

据我了解，通过object.rotation.x / object.rotation.y / object.rotation.z 设置的所有旋转都适用于对象的轴，而与场景中的对象位置无关。

但是在下面的代码中我设置了简单的旋转值box.rotation.y = PI/2 对box.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-quaternion，只需确保最后所有 3 个四元数都相乘即可。