web-dev-qa-db-fra.com

Three.js - Rotation d'une sphère autour d'un certain axe

J'ai un problème. Dans Three.js, je souhaite faire pivoter une sphère (la Terre) autour d'un axe incliné de 23,5 degrés. J'ai trouvé sphere.rotation.x, sphere.rotation.y et sphere.rotation.z, mais lorsque je les combine dans le bon rapport, la rotation de la sphère est assez étrange - elle n'a pas d'axe de rotation permanent. Je pense avoir besoin d’une fonction comme sphere.rotation.vector (1,0, -1). Est-ce que quelqu'un sait comment cette fonction est appelée et quelle est la syntaxe correcte?

Merci beaucoup pour les réponses!

javascriptvectorrotationthree.jsaxis
13
karlosss

Vous devez utiliser quaternions pour cela. Cette vidéo explique ce que sont les quaternions et comment ils sont utilisés dans les graphiques 3D.

Vous pouvez construire un quaternion comme ceci:

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

Ensuite, vous l'appliquez à votre objet en:

object.rotation.setEulerFromQuaternion( quaternion );

Vous pouvez également y parvenir en utilisant des hiérarchies d'objets. Par exemple, vous pouvez créer une instance Object3D() et l'incliner de 23,5 degrés, puis créer une sphère (Terre) et l'ajouter à l'objet incliné. La sphère tournera ensuite autour de l’axe Y incliné. Les quaternions sont toutefois le meilleur outil pour résoudre ce problème.

18
Aki

Vous n'avez pas besoin de comprendre comment les angles ou les quaternions d'Euler fonctionnent pour faire ce que vous voulez. Vous pouvez utiliser

Object3D.rotateOnAxis( axis, angle );

Assurez-vous que axis est un vecteur unitaire (a la longueur 1) et que angle est en radians.

Object3D.rotateOnAxis( axis, angle ) tourne sur un axe dans l'espace objet.

trois.js r.67

25
WestLangley
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);
}

la version de three.js est 86, voir exemple complet sur codepen .

1
luics