three.js drehen Sie die Kamera im Flugzeug

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);  

Diesen code in render Funktion muss die Kamera drehen, während ich mich durch drücken der Tasten:

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 die Kamera rotiert wie in FPS (first person shooter) auf der Ebene. Siehe Bild um zu verstehen, was ich will...

Ich werde versuchen, Sie zu nutzen sin(1) und cos(1) aber kann nicht verstehen, wie rotateOnAxis funktioniert, Ursache translate Funktionen arbeiten wie ein Charme und bewegt die Kamera in die Richtung, in der das, was Sie sieht.

P. S.

Hier ist ein docs der three.js vielleicht hilft es.

Zum behandeln von Tastatur-Ereignissen, die ich verwenden KeyboardJS

Und hier ist ein degInRad Funktion:

function degInRad(deg) {
    return deg * Math.PI / 180;
}  

Link auf JSFiddle

three.js drehen Sie die Kamera im Flugzeug

O - position der Kamera

O-O1 - aktuelle Kamera-Richtung

R1 - aktuelle Drehrichtung

R - Richtung, was ich will

Sorry für gute Bild.

Erwägen Sie, stattdessen verwenden/ändern THREE.PointerLockControls. Siehe threejs.org/examples/misc_controls_pointerlock.html. Hinweis: in der pointer-lock-source-code, wie die Kamera Hinzugefügt, als ein Kind/Enkelkind von 2 Objekte, um den Effekt zu erzielen, die Sie wollen.
es ist netter link, danke, aber ich weiß nicht brauchen, um die Kamera zu bewegen mit der Maus. Und camera verwendet nur in controls = new THREE.PointerLockControls( camera ); scene.add( controls.getObject() ); - es ist PointerLockControls innere Objekt fügt Szene, die nicht camera selbst und in onWindowResize Funktion - nur durch die Anwendung neuer Eigenschaften, und in renderer.render( scene, camera ); - hier ist die Verwendung von original camera variable. Über das, was child/grandchild Sie sprechen? Ich kann wirklich nicht verstehen, kannst Du es erklären? Vielen Dank im Voraus.
Beachten Sie, wie PointerLockControls dreht sich die Kamera, wie Sie wünschen, ausser es nutzt die Maus, anstatt mit der Tastatur. Zu bekommen, dass die Wirkung, verwendet es die pitchObject und yawObject Technik. Finden Sie die Quelle code. Das ist das, was ich gemeint child/grandchild. Sie tun nicht verwenden, die PointerLockControls; Sie implementieren können, ähnlich wie die Logik selbst.
es ist mein Versagen. Ich sehe nicht ein source code von PointerLockControls auf der Seite. Jetzt habe ich einen Versuch geben und wenn alle in Ordnung sein, gebe ich eine Antwort auf eine Frage, oder Fragen Sie an, wenn ich einen Fehler machen.
Ich schrieb die Arbeit Beispiel dort. Aber ich kann nicht verstehen, warum die Entwickler von three.js verwenden Sie diese pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) ); Bau im code. Wenn ich die Auskommentierung dieser Zeilen in meinen code vertikale Bewegung funktioniert schlecht. Können Sie das erklären? Danke.

InformationsquelleAutor ostapische | 2013-09-16

Schreibe einen Kommentar