Three.js - 旋转不遵循本地方向

Question

我正在使用一个围绕场景中心点构建的大型对象数组，并需要沿它们各自的本地轴进行操作。它们都使用一个空对象和lookAt()面向原点，然后我使用了这种方法来正确对齐其他轴。用这种方式获取初始旋转效果很好，但不幸的是，当我尝试使用object.rotation.x = <amount>在运行时旋转这些对象时，它并不尊重对象的本地轴。

令人困惑的是，它甚至没有使用全局轴，它似乎几乎完全是任意的。 我设置了一个JSFiddle来演示这个问题。正如您可以在第129行看到的那样，looker.rotation.z可以正常工作，它可以正确地沿着Z轴旋转，但如果将其更改为X或Y，则无法沿着本地或全局轴旋转。如果有人能解释一下导致这种情况发生的原因，那就太好了。

- Hobo Joe

Answer 1

目前正在发生的是您想要在当前方向上添加一些旋转，而设置变量looker.rotation.z意味着其他事情。

最后，为了计算旋转矩阵，将会有类似以下的内容（伪代码：函数不是这些，但你明白我的意思）：

this.matrix.multiply( makeXRotationMatrix(this.rotation.x) )
this.matrix.multiply( makeYRotationMatrix(this.rotation.y) )
this.matrix.multiply( makeZRotationMatrix(this.rotation.z) )
DrawGeometry(this.geom, this.matrix)

旋转的组合和构成不直观，这就是为什么它似乎不遵循任何轴系统的原因。
如果要对现有矩阵应用某个轴上的旋转，则可以使用 rotateX(angle)、rotateY(angle)、rotateZ(angle) 和 rotateOnAxis(axis, angle) 函数。其中，axis 可以是一个 THREE.Vector3 对象。
直接更改 looker.rotation.z 是可行的，因为它是几何图形最近的旋转，并且不会受到其他旋转的影响（请记住，变换矩阵应用于逆序，例如 T*R*G 表示先旋转 G，然后平移）。

总结

在这种情况下，建议不使用以下代码行：

looker.rotation.z += 0.05;

使用

looker.rotateZ (0.05);

或者

looker.rotateX (0.05);

希望这能帮助你：使用“代替”（instead）代替。 :)

- jmmut

---

抱歉没有早些回复，被其他工作压得有些不知所措。不过你的答案正是我在寻找的，谢谢！我之前不知道 rotateX、rotateY 和 rotateZ 函数。 - Hobo Joe