Ich habe ein Beispiel für genau das geschaffen, wonach du suchst - eine Jagdkamera (die einer Kiste folgt) unter:
Ich habe eine einfache 3D-Simulation mit drei .js, bei denen die Kamera in drei Dimensionen von Würfeln umgeben ist. Diese Würfel sollen helfen, zu visualisieren, wohin die Kamera schaut, bis die Ansichtssteuerungen codiert und getestet sind. Ich möchte eine einfache 3D-Anwendung erstellen, bei der die Kamera über hoch , runter , links und rechts gesteuert wird Schlüssel. So wie du deinen Kopf bewegst.
In meiner aktuellen Anwendung sind wir erfolgreich, wenn wir nach vorne blicken und anfangen zu schauen. Wenn wir jedoch um 90 Grad nach links abbiegen, drücken wir den Aufwärtspfeil ... Das Falsche passiert. Die Kamera inkrementiert die X-Achse, aber da wir in eine andere Richtung schauen, ist das Ändern der X-Achse ALONE WRONG ...
Nun gehe ich davon aus, dass eine Trigonometrie erforderlich ist, um die richtigen Werte für die z-Achse zu berechnen. Meine Trigonometrie ist jedoch nicht brillant.
Um zu verstehen, was ich meine, besuchen Sie bitte meine Jsfiddle: Ссылка
UP Taste erhöht NUR X
DOWN Taste NUR dekrementiert X
LINKS Taste erhöht NUR Y
RECHTS Taste NUR dekrementiert Y
Q Taste erhöht nur Z
W Taste NUR dekrementiert Z
(Q und W wurden nur codiert, um zu versuchen, mir zu helfen zu verstehen.)
Nach meinem derzeitigen Verständnis muss X, wenn ich die AUFWÄRTS-Taste drücke, inkrementieren und die Z-Achse muss basierend auf der aktuellen Y-Achse geändert werden. Allerdings kenne ich den Algorithmus nicht: (
Also müssen X und Z im KEYUP-Code geändert werden (ich denke, korrigiere mich bitte, wenn ich falsch liege)
%Vor%Es gibt eine Reihe von Lösungen für dieses Problem, aber da die Kamera nur nach oben, unten, links und rechts gedreht werden soll, ist die Antwort in diesem Fall einfach.
Sie müssen nur die Kamera Euler-Ordnung wie folgt auf "YXZ" setzen:
%Vor%Wenn Sie das tun, wird alles sehr intuitiv.
Hier ist eine aktualisierte Geige: Ссылка (diese Demo verwendet jedoch r.54)
Sobald Sie camera.rotation.z vom Standardwert von zero ändern, werden die Dinge sehr verwirrend. Also tu das nicht. : -)
drei.js r.65
Obwohl dies Ihren Code nicht direkt repariert, dachte ich mir, dass Three.js zwei vorgefertigte Controller zur Verfügung stellt, um im FPS-Modus zu navigieren. Sie benutzen beide die Maus zum Schauen und können sich bewegen, sollten aber relativ einfach an das Aussehen der Tastatur angepasst werden und bei Bedarf die Bewegung entfernen. Sie sind:
Ich würde letzteres als einen Anfangspunkt empfehlen, weil es ziemlich einfach ist und der erstere verwirrend den suchenden Code zweimal hat, wahrscheinlich als ein Artefakt von alten Merkmalen.
Obwohl dies Ihren Code nicht direkt repariert, dachte ich mir, dass Three.js zwei vorgefertigte Controller zur Verfügung stellt, um im FPS-Modus zu navigieren. Sie benutzen beide die Maus zum Schauen und können sich bewegen, sollten aber relativ einfach an das Aussehen der Tastatur angepasst werden und bei Bedarf die Bewegung entfernen. Sie sind:
Ich würde letzteres als einen Anfangspunkt empfehlen, weil es ziemlich einfach ist und der erstere verwirrend den suchenden Code zweimal hat, wahrscheinlich als ein Artefakt von alten Merkmalen.
Ich habe eine einfache 3D-Simulation mit drei .js, bei denen die Kamera in drei Dimensionen von Würfeln umgeben ist. Diese Würfel sollen helfen, zu visualisieren, wohin die Kamera schaut, bis die Ansichtssteuerungen codiert und getestet sind. Ich möchte eine einfache 3D-Anwendung erstellen, bei der die Kamera über hoch , runter , links und rechts gesteuert wird Schlüssel. So wie du deinen Kopf bewegst.
In meiner aktuellen Anwendung sind wir erfolgreich, wenn wir nach vorne blicken und anfangen zu schauen. Wenn wir jedoch um 90 Grad nach links abbiegen, drücken wir den Aufwärtspfeil ... Das Falsche passiert. Die Kamera inkrementiert die X-Achse, aber da wir in eine andere Richtung schauen, ist das Ändern der X-Achse ALONE WRONG ...
Nun gehe ich davon aus, dass eine Trigonometrie erforderlich ist, um die richtigen Werte für die z-Achse zu berechnen. Meine Trigonometrie ist jedoch nicht brillant.
Um zu verstehen, was ich meine, besuchen Sie bitte meine Jsfiddle: Ссылка
UP Taste erhöht NUR X
DOWN Taste NUR dekrementiert X
LINKS Taste erhöht NUR Y
RECHTS Taste NUR dekrementiert Y
Q Taste erhöht nur Z
W Taste NUR dekrementiert Z
(Q und W wurden nur codiert, um zu versuchen, mir zu helfen zu verstehen.)
Nach meinem derzeitigen Verständnis muss X, wenn ich die AUFWÄRTS-Taste drücke, inkrementieren und die Z-Achse muss basierend auf der aktuellen Y-Achse geändert werden. Allerdings kenne ich den Algorithmus nicht: (
Also müssen X und Z im KEYUP-Code geändert werden (ich denke, korrigiere mich bitte, wenn ich falsch liege)
%Vor%Ich habe ein Beispiel für genau das geschaffen, wonach du suchst - eine Jagdkamera (die einer Kiste folgt) unter:
Es gibt eine Reihe von Lösungen für dieses Problem, aber da die Kamera nur nach oben, unten, links und rechts gedreht werden soll, ist die Antwort in diesem Fall einfach.
Sie müssen nur die Kamera Euler-Ordnung wie folgt auf "YXZ" setzen:
%Vor%Wenn Sie das tun, wird alles sehr intuitiv.
Hier ist eine aktualisierte Geige: Ссылка (diese Demo verwendet jedoch r.54)
Sobald Sie %code% vom Standardwert von %code% ändern, werden die Dinge sehr verwirrend. Also tu das nicht. : -)
drei.js r.65
Tags und Links javascript canvas three.js webgl