web-dev-qa-db-fra.com

Déplacement de la caméra, lookAt et rotations dans trois.js

Je n'arrive pas à comprendre lookAt et les rotations de la caméra.

J'ai un cercle de petites sphères autour de [0,0,0] sur le plan x-y.

La caméra est placée à [0,0,30] et après un regard, la rotation de la caméra est de [0,0,0]. Le cercle apparaît comme si vous regardiez d'en haut (comme prévu).

Ensuite, je déplace la caméra sur [30,0,0] et après un coup d'oeil, la rotation de la caméra est de [0,90deg, 0]. Le cercle apparaît sur le côté, mais verticalement et non horizontalement comme je l’attendais. Pourquoi la caméra tourne-t-elle de 90 degrés pour y?

Après cela, je déplace la caméra sur [0,30,0] et après un coup d'oeil, la rotation de la caméra est de [-90deg, 0,90deg]. Le cercle apparaît à nouveau sur le côté, verticalement et non horizontalement.

Pourquoi la caméra tourne? Je pensais qu'il n'y aurait pas de rotation du tout puisque c'était sur les axes x et y eux-mêmes.

Merci pour toute aide! :-)

Note: Initialement posté à https://github.com/mrdoob/three.js/issues/2917 mais on m'a dit de venir à Stack Overflow.

three.js
45
Charity Sipe

Pour résoudre le problème, vous pouvez spécifier le vecteur de montée pour la caméra avant d'exécuter la commande lookAt ().

// Place camera on x axis
camera.position.set(30,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

Changez le vecteur à vos besoins. Vous pouvez même l'inverser en spécifiant une valeur négative: (0,0, -1). Il est important de définir le vecteur d'ouverture AVANT d'utiliser lookAt ().

J'ai créé un exemple complet à l'adresse http://jsfiddle.net/VsWb9/991/ avec 2 cubes. Le plus petit est supposé être au-dessus du grand (sur l’axe des z positif).

77
jorgenfb