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
O
- position der Kamera
O-O1
- aktuelle Kamera-Richtung
R1
- aktuelle Drehrichtung
R
- Richtung, was ich will
Sorry für gute Bild.
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie bekommen, was Sie wollen, einfach durch einstellen der
camera.rotation.order = 'YXZ';
camera.rotation.x
und.y
direkt.Ich denke, es ist eine bessere Lösung, danke. Jetzt sehe ich, dass
Object3D.rotation
ist einEuler
nichtVector3
geben...InformationsquelleAutor IceCreamYou
glauben, was Ihr auf der Suche nach konzeptionell ist ein Kamera-rig-setup. Bei diesem Ansatz zunächst erstellen Sie eine
Object3D
zu den "Hals", dann befestigen Sie die Kamera auf das Objekt mit der gewünschten rotation. Dann können Sie die umdrehungen derObject3D
zu suchen, um ohne die wobble-Effekt. Zu tragen es weiter, Sie könnten nest, das "Hals" - Objekt in einem anderenObject3D
zu handeln, wie der "Körper" und wenden Sie die übersetzungen, um das Objekt zu bewegen, um die Szene. Auf diese Weise haben Sie eine grundlegende Kamera-controller-rig. Ich veränderte Ihre Geige wie so:Edit: Implementierung ändern, um besser an @ostapische Anwendungsfall. Hier ist die Geige link
War ich zu erwähnen das PointLockControl oder FirstPersonControl, aber ich sehe WestLangley hat so freundlich zu empfehlen. Jedenfalls viel Glück,
Dort gehen wir, den geänderten code wurde aktualisiert. Vielen Dank für die Berücksichtigung, und Dank @WestLangley für die eine solide Beratung.
InformationsquelleAutor Darryl_Lehmann