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

J'ai un problème. Dans Three.js je veux tourner une sphère (la Terre) autour de l'axe incliné de 23,5 degrés. J'ai trouvé de la sphère.de rotation.x, de la sphère.de rotation.y et de la sphère.de rotation.z, mais quand je les combine dans le rapport correct, la sphère de rotation est assez bizarre, il n'a pas de permanente axe de rotation. Je pense que j'ai besoin d'une fonction comme la sphère.de rotation.vecteur(1,0,-1). Personne ne sait comment cette fonction est appelée et comment la syntaxe correcte est?

Merci beaucoup pour les réponses!

source d'informationauteur karlosss

  1. 18

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

    Vous pouvez construire un quaternion, comme ceci:

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

    Puis vous l'appliquez à votre objet par:

    object.rotation.setEulerFromQuaternion( quaternion );

    Vous pouvez également y parvenir en utilisant l'objet des hiérarchies. Par exemple, vous pouvez faire un Object3D() instance et de l'incliner de 23,5 degrés, puis de créer une sphère (la Terre) et l'ajouter à l'orientés objet. La sphère va alors tourner autour de basculement de l'axe y. Les Quaternions sont le meilleur outil pour la résolution de ce.

  2. 22

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

    Object3D.rotateOnAxis( axis, angle );

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

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

    three.js r.67

  3. 0
    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 version est de 86, voir exemple complet sur codepen.