Three.js - Rotazione di una sfera attorno a un determinato asse

Question

Ho un problema. In Three.js, voglio ruotare una sfera (Terra) attorno all'asse inclinato di 23,5 gradi. Ho trovato sphere.rotation.x, sphere.rotation.y e sphere.rotation.z, ma quando li combino nel rapporto corretto, la rotazione della sfera è piuttosto strana - non ha un asse di rotazione permanente. Penso di aver bisogno di una funzione come sphere.rotation.vector (1,0, -1). Qualcuno sa come viene chiamata questa funzione e qual è la sintassi corretta?

Mille grazie per le risposte!

Answer 1

Per questo è necessario utilizzare quaternions. This video spiega quali sono i quaternari e come vengono utilizzati nella grafica 3D.

è possibile costruire un quaternione come questo:

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

quindi si applica al vostro oggetto:

object.rotation.setEulerFromQuaternion(quaternion); 

È possibile anche ottenere questo utilizzando gerarchie di oggetti. Ad esempio, è possibile creare un'istanza Object3D() e inclinarla di 23,5 gradi, quindi creare una sfera (Terra) e aggiungerla all'oggetto inclinato. La sfera ruoterà quindi attorno all'asse Y inclinato. Tuttavia, i quaternioni sono lo strumento migliore per risolvere questo problema.

Answer 2

Non devi capire come gli angoli di Eulero oi quaternioni lavorano per fare ciò che vuoi. È possibile utilizzare

Object3D.rotateOnAxis(axis, angle); 

Assicurarsi axis è un vettore unitario (ha lunghezza 1), e angle è in radianti.

Object3D.rotateOnAxis(axis, angle) ruota su un asse nello spazio oggetti.

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 versioni 86, vedi full example on codepen.