web-dev-qa-db-fra.com

Three.js: indique la direction dans laquelle la caméra se tourne

Je suis sûr que cette question a été répétée plusieurs fois, mais je ne trouve aucune réponse à mon problème spécifique!

Je crée un jeu en utilisant html5 et THREE.js, et j'ai une caméra qui tourne avec l'ordre euler de 'YXZ'.

Il en va de la rotation de la caméra vers le haut, le bas, la gauche et la droite, comme une tête. Comme dans la vue à la première personne.

Avec cet ordre euler, la propriété z dans camera.rotation n'est pas utilisée (toujours 0). x est utilisé pour spécifier la hauteur ou la latitude en radians et y est utilisé pour décrire la longitude.

Un certain nombre de cibles se déplacent de manière sphérique autour de l'utilisateur, la caméra étant constamment au centre de cette sphère. Disons que la sphère a un rayon de 1000.

Mon objectif est de calculer l’angle entre la position de la caméra et la cible.

J'ai écrit ce code qui calcule l'angle entre 2 vecteurs:

var A = new THREE.Vector3(1,0,0);
var B = new THREE.Vector3(0,1,0);

var theta = Math.acos( A.dot(B) / A.length() / B.length() );

// theta = PI/2;

J'ai le vecteur de la cible (cibles [0] .position).

Le fait est que je ne peux pas trouver un moyen d’obtenir le vecteur de la position de la caméra.

J'ai examiné les méthodes Vector3.applyProjection et applyEuler, mais je n'ai toujours pas obtenu de bons résultats.

Je crois que l'ordre euler doit d'abord être remplacé par «XYZ» avant que des projections ne soient faites? J'ai essayé, et je ne sais pas comment faire, la documentation est assez difficile à comprendre.

Dites si la caméra regarde directement vers la droite, alors je dois obtenir un vecteur qui est RADIUS loin du centre dans la direction de la rotation actuelle.

Je vais donc me retrouver avec 2 vecteurs, sur lesquels je peux faire des calculs!

Merci d'avance!

javascripthtml5vectorthree.js
17
AlexMorley-Finch

La caméra est en train de regarder en bas son axe z interne. Créez donc un vecteur pointant vers le bas sur l’axe z négatif:

var vector = new THREE.Vector3( 0, 0, -1 );

Appliquez maintenant la même rotation au vecteur qui est appliqué à la caméra:

vector.applyQuaternion( camera.quaternion );

Vous pouvez obtenir l'angle en radians par rapport à la cible de la manière suivante:

angle = vector.angleTo( target.position );

EDIT: Vous pouvez maintenant obtenir la direction dans laquelle la caméra ressemble:

var vector = new THREE.Vector3(); // create once and reuse it!
...
camera.getWorldDirection( vector );

Remarque: En transmettant le vectordans lequel stocker le résultat, la méthode n'aura pas à instancier un nouveau THREE.Vector3 à chaque appel de la méthode.

Mis à jour à three.js r.79

33
WestLangley

J'ai passé beaucoup de temps à essayer de comprendre la question du capitaine évident. 

Voici comment cela a finalement fonctionné pour moi:

    vector = camera.getWorldDirection();
    theta = Math.atan2(vector.x,vector.z);

theta est en radians. C’est ainsi que j’oriente le personnage de mon jeu de manière à ce qu’il fasse face à la même chose que la caméra. La méthode getWorldDirection () est une option relativement nouvelle pour la caméra.

9
fluffybunny

Je ne peux pas commenter, mais la réponse de fluffybunny fonctionne parfaitement. getWorldDirection()et ensuite changer ce vecteur en radians est la voie à suivre.

0
pwhitt