Drei.JS drehen die Kamera in der Ebene
Ich habe eine Kamera in meiner App:
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 1;
camera.position.y = -5;
camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
camera.up = new THREE.Vector3(0, 0, 1);
Diese Code inrender
Funktion muss die Kamera drehen, während ich die Tasten drücke:
if (leftPressed) {
camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(1));
} else if (rightPressed) {
camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(-1));
}
if (upPressed) {
camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(1));
} else if (downPressed) {
camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(-1));
}
Kamera dreht sich, aber nicht in der Weise, die ich brauche. Ich möchte, dass sich die Kamera wie in FPS (First Person Shooter) im Flugzeug dreht. Siehe Bild, um zu verstehen, was ich will ...
Ich versuche es zu benutzensin(1)
undcos(1)
kann aber nicht verstehen wierotateOnAxis
funktioniert, weiltranslate
Funktionen wirken wie ein Zauber und bewegen die Kamera in die Richtung, in die sie sieht.
P.S.
Hier ist eindocs zumthree.js
vielleicht hilft es.
Zur Bearbeitung von Tastaturereignissen verwende ichKeyboardJS
Und hier ist eindegInRad
Funktion:
function degInRad(deg) {
return deg * Math.PI / 180;
}
Link einJSFiddle
O
- Position der KameraO-O1
- aktuelle KamerarichtungR1
- aktuelle DrehrichtungR
- Richtung was ich will
Entschuldigung fürgut Bild.