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

- godblessstrawberry

---

请参阅https://en.wikipedia.org/wiki/Gimbal_lock。 - undefined

@WestLangley 这是我所拥有的吗？我认为万向锁只会在更复杂的情况下出现。 - undefined

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四元数，只需确保最后将所有三个四元数相乘即可。

- Marquizzo

---

根据使用情况，如果您必须将Y轴旋转π/2，您可以简单地更改旋转的顺序：box.rotation.order = 'YXZ'; - undefined