Question

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

非常感谢您的回答！

Answer 1

您无需了解Euler角度或四元数如何工作以执行您想要的操作。你可以使用

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

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

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

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

three.js r.104

Answer 2

您需要使用quaternions。 This video解释了四元数是什么以及它们在3D图形中的使用方式。

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

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

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

object.rotation.setEulerFromQuaternion( quaternion );

您还可以使用对象层次结构来实现此目的。例如，您可以创建Object3D()实例并将其倾斜23.5 degs，然后创建一个球体（地球）并将其添加到倾斜对象。然后球体将围绕倾斜的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，请参阅full example on codepen。

Answer 4

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

包含库文件

然后

var controls = new THREE.ObjectControls（camera，renderer.domElement，yourMesh）;

您可以在此处找到实时演示：https://albertopiras.github.io/threeJS-object-controls/

以下是仓库：https://github.com/albertopiras/threeJS-object-controls。

希望这会有所帮助

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

4 个答案: