Three.js: Afficher les axes de coordonnées du monde dans le coin de la scène

C'est probablement un très de base problème, mais je n'ai pas trouvé de solution pour le moment et ça m'énerve. J'aimerais vous montrer des flèches indiquant le monde de coordonner les directions (x, y, z) dans le coin en bas à droite de la caméra se fait dans Maya, de sorte que lors de la rotation de la caméra autour d'un objet, ou à se déplacer dans une scène, vous pouvez toujours déterminer les directions des coordonnées du monde. J'ai essayé de le faire à l'aide de deux approches différentes et aucune n'a fonctionné jusqu'ici.

J'ai un objet avec trois flèches comme des enfants à l'aide de la THREE.ArrowHelper classe, nous allons l'appeler XYZ pour le moment. La première approche consiste à faire XYZ un enfant de la scène et de fournir une position calculée à partir de la caméra de la position actuelle plus de décalage dans la direction de la caméra est pointée et les ajuster de sorte qu'il apparaît dans le coin, je veux qu'il à plutôt que dans le centre de l'écran. J'ai presque eu ce travail, comme dans la flèches à maintenir la bonne rotation, mais la situation est un peu drôle, et j'ai arrêté d'aller en bas de cette route parce que c'était vraiment 'nerveux' lors du déplacement de la caméra autour de. Je ne suis pas sûr de savoir si c'était un problème de performance ou quelque chose d'autre.

La deuxième méthode est de faire XYZ un enfant de la caméra avec un décalage de position et puis d'inverser la rotation de l'appareil photo et d'appliquer la rotation inversée pour XYZ de sorte qu'il corresponde coordonnées du monde. J'ai l'impression de fermer à l'aide de cette méthode, mais je peut soit obtenir la position correcte, ou la rotation correcte, pas les deux.

Je suis actuellement en utilisant le code XYZ.matrix.extractRotation( camera.matrixWorldInverse ); à me donner la bonne orientation pour XYZmais c'est le positionnement est éteint. Si j'utilise XYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); alors la position est agréable (fixé à l'appareil photo), mais l'orientation ne change pas.

Si quelqu'un a une rapide hack pour obtenir ce travail, il serait très apprécié. Si vous avez une meilleure méthode que celle que je poursuis alors ce serait aussi utile.

** - EDIT - **
Devrais probablement mentionner que vous pouvez trouver la version de travail ici - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) je vais ranger mon code dans google drive mais le fait de travailler en local avec wamp et l'aliasing qui signifie que toutes les modifications que je fais localement se reflètent en ligne dès que google drive synchronise. I. E. il peut être rompu lorsque vous prenez un coup d'oeil.

source d'informationauteur wackozacko

  1. 15

    C'est avant ici.

    L'astuce consiste à ajouter un deuxième scène avec un deuxième appareil photo, qui a la même orientation que celle de l'original de la caméra, mais maintient une certaine distance de l'origine.

    camera2.position.copy( camera.position );
camera2.position.sub( controls.target );
camera2.position.setLength( CAM_DISTANCE );
camera2.lookAt( scene2.position );

    EDIT: mise à Jour de violon: http://jsfiddle.net/aqnL1mx9/

    three.js r.69

  2. 10

    Avec de nouveaux three.js versions (je ne sais pas depuis quand) vous pouvez utiliser:

    var axisHelper = new THREE.AxisHelper( 5 );
scene.add( axisHelper );

    Référence: AxisHelper