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 Z Axis我如何在这里正确使用旋转，例如，如果我想在旋转后应用旋转Box Y Axis。

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

Answer 1

您遇到了万向节锁定，因此您需要使用四元数来实现您想要的旋转。首先，您需要从轴角度设置每个四分之一，然后您必须将它们相乘以获得所需的旋转。

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 个四元数最后都相乘即可。