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

Question

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

Answer 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( Angular ) 和 rotateOnAxis(轴， Angular )。 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);

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