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

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 ) 在对象空间中的轴上旋转.

three.js r.67

Answer 2

您需要使用四元数.此视频介绍了四元数以及它们在3D图形中的使用方式.

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

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

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

object.rotation.setEulerFromQuaternion( quaternion );

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