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

Question

我有一个问题。在Three.js中，我想让一个球体（地球）绕23.5度倾斜的轴旋转。我找到了球体的rotation.x、rotation.y和rotation.z属性，但是当我按正确比例组合它们时，球体的旋转非常奇怪——它没有永久的旋转轴。我认为我需要一个像sphere.rotation.vector(1,0,-1)这样的函数。有人知道这个函数叫什么名字以及正确的语法是什么吗？

非常感谢答案！

- karlosss

Answer 1

你不需要理解欧拉角或四元数的工作原理来完成你想要做的事情。你可以使用

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

请确保axis是一个单位向量（长度为1），angle以弧度为单位。

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

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

three.js r.104

- WestLangley

---

谢谢您的帮助，但我是three.js的初学者，还不能使用Object3D...我相信它很好用，但我已经使用了四元数。 - karlosss

@karlosss Object3D是Three.js中许多对象继承的基类。如果您的对象具有旋转属性，则可能是Object3D的子类。 - Joel

@RamyAlZuhouri 它是一个单位向量，因此每个轴的长度都为 1。虽然三维向量确实有三个轴 ;) - Tim S.

如何让这个东西在本地对象上工作？目前它围绕着世界轴旋转而不是对象轴。谢谢。 - James Milner

Answer 2

你需要使用四元数来完成这个任务。这个视频会解释什么是四元数以及它们在3D图形中的应用。

你可以按照以下方式构建一个四元数：

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

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

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

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

- Aki

---

自threejs r59版本起，setEulerFromQuaternion()方法已被移除（参见：https://github.com/mrdoob/three.js/wiki/Migration#r58--r59）。现在应该使用以下代码替换第二行：`object.rotation = new THREE.Euler().setFromQuaternion( quaternion );` - kontur

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 上查看完整示例。

- luics

---

你每秒实例化多少次 Quaternion、Vector3 和 Euler？请在渲染循环之外创建一个四元数的实例。在渲染循环中，使用以下方法： planet.position.applyQuaternion( quaternion ); 同时，在循环之外调用一次 scene.getObjectByName() 方法。 - WestLangley

不错的建议。使用上述代码来表达如何绕任意轴旋转非常简单。我现在已经在完整示例中进行了优化。 - luics

加油，你没有遵循我的建议。在渲染循环之外设置“四元数”。删除“欧拉角”。改为调用“applyQuaternion()”。 - WestLangley

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。

希望这有所帮助

- Alberto Piras