Three.js - 不尊重本地方向的旋转答案

【问题标题】：Three.js - Rotation not respecting local orientationThree.js - 不尊重本地方向的旋转
【发布时间】：2014-02-27 16:00:52
【问题描述】：

我正在使用围绕场景中心点构建的大量对象，并且需要围绕它们的局部轴操作它们。它们都使用空白对象和lookAt（）面向原点，然后我使用this method to align the other axes correctly。以这种方式获得初始旋转效果很好，不幸的是，当我尝试使用object.rotation.x = <amount> 动态旋转这些对象时，它不尊重对象的局部轴。

令人困惑的部分是，它甚至没有使用全局轴，它使用的轴几乎看起来完全是任意的。 I set up a JSFiddle to demonstrate this here。正如您在第 129 行看到的，looker.rotation.z 工作正常，它沿 Z 轴正确旋转，但如果更改为 X 或 Y，它不会沿局部或全局轴旋转。如果有人能揭开造成这种情况的原因，那就太好了。

【问题讨论】：

标签： javascript 3d rotation three.js

【解决方案1】：

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

最后，为了计算looker的旋转矩阵，会有类似的东西（伪代码：函数不是这些，但你明白了）：

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 是Rotating the @ 987654332@eometry，然后，Translating）。

总结

在这种情况下，我建议不要使用该行：

looker.rotation.z += 0.05;

使用

looker.rotateZ (0.05);

或

looker.rotateX (0.05);

相反。希望这会有所帮助:)

【讨论】：

抱歉没有及时回复，忙于其他工作。你的答案正是我想要的，谢谢！我之前不知道rotateX、rotateY 和rotateZ 函数。