Three.js - 围绕特定轴旋转球体

Question

我有个问题。在 Three.js 中，我想围绕倾斜 23.5 度的轴旋转一个球体（地球）。我找到了 sphere.rotation.x、sphere.rotation.y 和 sphere.rotation.z，但是当我以正确的比例组合它们时，球体的旋转非常奇怪 - 它没有永久旋转轴。我想我需要像 sphere.rotation.vector(1,0,-1) 这样的函数。有谁知道这个函数是如何调用的以及正确的语法是怎样的？

非常感谢您的回答！

原文由 karlosss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为此，您需要使用 四元数。 该视频 解释了四元数是什么以及如何在 3D 图形中使用它们。

你可以像这样构造一个四元数：

 quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );

然后通过以下方式将其应用于您的对象：

 object.rotation.set( new THREE.Euler().setFromQuaternion( quaternion ) );

您也可以通过使用对象层次结构来实现这一点。例如，您可以制作一个 Object3D() 实例并将其倾斜 23.5 度，然后创建一个球体（地球）并将其添加到倾斜的对象中。然后球体将围绕倾斜的 Y 轴旋转。然而，四元数是解决这个问题的最佳工具。

原文由 Aki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您无需了解欧拉角或四元数的工作原理即可完成您想要的操作。您可以使用

Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );

确保 axis 是单位向量（长度为 1），并且 angle 以弧度为单位。

Object3D.rotateOnAxis( axis, angle ) 在对象空间中绕轴旋转。

Object3D.rotateOnWorldAxis( axis, angle ) 在世界空间的轴上旋转。

三.js r.104

原文由 WestLangley 发布，翻译遵循 CC BY-SA 4.0 许可协议