javascript - Three.js - 围绕某个轴旋转球体

Question

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

非常感谢您的回答！

Answer 1

您不必了解欧拉角或四元数如何工作即可完成您想要的工作。您可以使用

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

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

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

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

三.js r.104

Answer 2

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

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

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

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

object.rotation.setEulerFromQuaternion( quaternion );

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

Answer 3

var quaternion = new THREE.Quaternion();
var object = scene.getObjectByName('xxx');
function render(){
    quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005);
    object.position.applyQuaternion(quaternion);
}

three.js 版本是 86，请参阅codepen 上的完整示例。

Answer 4

您可以使用 ThreeJS 的“ObjectControls”模块旋转球体，该模块允许您旋转单个对象（或组），而不是场景。

包括库：

然后

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

你可以在这里找到一个现场演示：https ://albertopiras.github.io/threeJS-object-controls/

这是回购：https ://github.com/albertopiras/threeJS-object-controls 。

希望这可以帮助