Three.js - Вращение сферы вокруг определенной оси

Question

У меня проблема. В Three.js я хочу повернуть сферу (Землю) вокруг оси, наклонной на 23,5 град. Я нашел сферу .rotation.x, sphere.rotation.y и sphere.rotation.z, но когда я совмещаю их в правильном соотношении, вращение сферы довольно странно - у него нет постоянной оси вращения. Я думаю, мне нужна функция, например sphere.rotation.vector (1,0, -1). Кто-нибудь знает, как эта функция вызывается и как выглядит правильный синтаксис?

Большое спасибо за ответы!

Answer 1

Для этого вам необходимо использовать quaternions. This video объясняет, что такое кватернионы и как они используются в 3D-графике.

Вы можете построить кватернион так:

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

Затем вы примените его к объекту с помощью:

object.rotation.setEulerFromQuaternion(quaternion); 

Вы также можете достичь этого с помощью иерархии объектов. Например, вы можете создать экземпляр Object3D() и направить его на 23,5 град, затем создать сферу (Земля) и добавить ее к наклонному объекту. Сфера затем повернется вокруг наклонной оси Y. Кватернионы, однако, являются лучшим инструментом для решения этого.

Answer 2

Вам не нужно понимать, как углы Эйлера или кватернионы работают над тем, что вы хотите. Вы можете использовать

Object3D.rotateOnAxis(axis, angle); 

Убедитесь axis единичный вектор (имеет длину 1), и angle в радианах.

Object3D.rotateOnAxis(axis, angle) Вращается вокруг оси в пространстве объекта.

Three.js R.67

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.