La première personne de la simulation avec three.js en utilisant les flèches du clavier
Pour ma source, visitez http://jsfiddle.net/fYtwf/
Fond
J'ai une simple simulation en 3d à l'aide de three.js lorsque l'appareil photo est entouré en 3 dimensions par les cubes. Ces cubes sont pour aider à visualiser l'endroit où la caméra est à la recherche jusqu'à ce que le point de vue des contrôles sont codé et testé. Je veux créer une simple application 3D, où la caméra est contrôlée via jusqu', bas, gauche et droit clés. Tout comme le déménagement de votre tête
Questions
Dans mon application actuelle, en regardant vers l'avant, et de commencer à regarder vers le haut, nous avons du succès. Toutefois, lorsque nous tournons à gauche de 90 degrés, et nous appuyer sur la flèche vers le haut... Le mal de chose arrive. l'appareil photo incrémente l'axe des x, mais parce que nous sommes face à une autre direction, la modification de l'axe des x est SEUL TORT...
Maintenant, je suppose que c'est parce que certains de la trigonométrie est nécessaire pour calculer les valeurs correctes pour l'axe z. Cependant, mon trig n'est pas génial.
Actuel
Pour obtenir une meilleure compréhension de ce que je veux dire, merci de visiter mon jsfiddle : http://jsfiddle.net/fYtwf/
JUSQU' touche incrémente X
BAS clé décrémente X
GAUCHE touche incrémente Y
DROIT clé décrémente Y
Q touche incrémente Z
W clé décrémente Z
( Q et W ont été codés seulement pour essayer de m'aider à comprendre. )
À partir de ma compréhension actuelle, lorsque j'appuie sur la touche HAUT, X doit d'incrémentation et de l'axe Z doit être modifiés en fonction de l'axe des Y est. Cependant, je ne connais pas l'algorithme 🙁
Donc X et Z doivent être modifiées dans le KEYUP code ( je pense, corrigez-moi si je me trompe )
//setRotateX, getRotateX, setRotateY and getRotateY are extended
//camera functions I wrote so I could work with degrees. Solution
//IS NOT required to use them, they just helped me
switch( key )
{
case KEYUP:
if ( camera.getRotateX() < 90 ){ //restrict so they cannot look overhead
camera.setRotateX( camera.getRotateX() + VIEW_INCREMENT );
}
break;
case KEYDOWN:
if ( camera.getRotateX() > -90 ){ //restrict so they cannot look under feet
camera.setRotateX( camera.getRotateX() - VIEW_INCREMENT );
}
break;
case KEYLEFT:
camera.setRotateY( camera.getRotateY() + VIEW_INCREMENT );
break;
case KEYRIGHT:
camera.setRotateY( camera.getRotateY() - VIEW_INCREMENT );
break;
}
OriginalL'auteur AlexMorley-Finch | 2012-11-06
Vous devez vous connecter pour publier un commentaire.
Il y a un certain nombre de solutions à ce problème, mais puisque vous voulez seulement la caméra pour tourner le haut, le bas, la gauche et la droite, la réponse dans ce cas est facile.
Vous avez juste besoin de régler l'appareil d'Euler d'ordre "YXZ" comme suit:
Si vous le faites, le tout est très intuitif.
Ici est une mise à jour du violon: http://jsfiddle.net/fYtwf/3/ (cette démo est à l'aide de r.54, cependant)
Une fois que vous changez
camera.rotation.z
de sa valeur par défaut dezero
, les choses vont devenir très déroutant. Afin de ne pas le faire. 🙂three.js r.65
OriginalL'auteur WestLangley
Alors que ce n'est pas corriger directement votre code, j'ai pensé que je le mentionne que Three.js fournit deux prêts à des contrôleurs de la navigation dans la mode des FPS. Ils ont tous deux l'utilisation de la souris pour la recherche et peut se déplacer, mais se doit d'être assez simple de s'adapter à clavier de rechercher et de supprimer le mouvement si nécessaire. Ils sont:
FirstPersonControls
PointerLockControls
Je vous recommande celui-ci comme un point de départ parce que c'est plutôt simple et à l'ancienne confusion a la recherche de code à deux reprises, probablement comme un artefact à partir d'anciennes fonctionnalités.
FirstPersonControls
... 🙂OriginalL'auteur Tapio
J'ai créé un exemple de ce que vous êtes à la recherche pour - chase-caméra (qui suit une boîte autour d'):
http://stemkoski.github.com/Three.js/#chase-camera
OriginalL'auteur Lee Stemkoski