javascript - Three.js - 旋转不尊重本地方向

我正在使用围绕场景中的中心点构建的大量对象，并且需要围绕它们的局部轴操纵它们。它们都使用空白对象和 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，则不会沿局部或全局轴旋转。如果有人能够揭开造成这种情况的原因，那就太好了。

最佳答案

发生的事情是您想为当前方向添加一些旋转，而设置变量 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 是 R G 几何，然后，T 对其进行翻译) .

概括

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

looker.rotation.z += 0.05;

用

looker.rotateZ (0.05);

或者

looker.rotateX (0.05);

反而。希望这可以帮助 :)

关于javascript - Three.js - 旋转不尊重本地方向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21539695/