Three.js: Zeigen Sie die Weltkoordinatenachsen in der Ecke der Szene an
Dies ist wahrscheinlich ein sehr einfaches Problem, aber ich habe noch keine Lösung gefunden und es nervt mich. Ich möchte Pfeile in der rechten unteren Ecke der Kamera anzeigen, die die Weltkoordinatenrichtungen (x, y, z) angeben, wie dies in Maya der Fall ist, damit beim Drehen der Kamera um ein Objekt oder beim Bewegen durch eine Szene Sie können immer noch die Richtungen der Weltkoordinaten identifizieren. Ich habe versucht, dies mit zwei verschiedenen Ansätzen zu erreichen, und keiner hat bisher funktioniert.
Ich habe ein Objekt mit drei Pfeilen als Kinder mit demTHREE.ArrowHelper
Klasse, wir werden es nennenXYZ
für den Moment. Der erste Ansatz ist zu machenXYZ
ein untergeordnetes Element der Szene und geben Sie eine Position an, die aus der aktuellen Position der Kamera berechnet wird, sowie einen Versatz in der Richtung, in die die Kamera zeigt, und stellen Sie ihn so ein, dass er in der Ecke angezeigt wird, die ich möchte, anstatt in der Mitte des Bildschirms. Ich habe es fast geschafft, da die Pfeile die richtige Drehung beibehalten, aber die Position ist ein bisschen komisch, und ich habe aufgehört, diesen Weg zu gehen, weil es beim Bewegen der Kamera wirklich "nervös" war. Ich bin nicht sicher, ob es ein Leistungsproblem oder etwas anderes war.
Die zweite Methode ist zu machenXYZ
ein Kind der Kamera mit einem lokalen Positionsversatz und dann die Drehung der Kamera umkehren und die umgekehrte Drehung auf anwendenXYZ
so stimmt es mit den Weltkoordinaten überein. Mit dieser Methode scheine ich nahe dran zu sein, aber ich kann entweder die richtige Position oder die richtige Rotation erzielen, nicht beides.
Ich verwende derzeit den CodeXYZ.matrix.extractRotation( camera.matrixWorldInverse );
um mir die richtige Orientierung zu geben fürXYZ
, aber die Positionierung ist ausgeschaltet. Wenn ich benutzeXYZ.matrixWorld.extractRotation( camera.matrixWorldInverse );
Dann bleibt die Position in Ordnung (an der Kamera befestigt), aber die Ausrichtung ändert sich nicht.
Wenn jemand einen schnellen Hack hat, um dies zum Laufen zu bringen, wäre er sehr dankbar. Wenn Sie eine bessere Methode haben als die, die ich verfolge, dann wäre das auch hilfreich.
** - BEARBEITEN - ** Sollte wohl erwähnen, dass Sie die Arbeitsversion hier finden - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Ich speichere meinen Code in Google Drive, arbeite aber lokal mit Wamp und Aliasing, was bedeutet, dass alle Änderungen, die ich lokal vornehme, online übernommen werden, sobald Google Drive synchronisiert wird. I.E. es kann kaputt sein, wenn Sie einen Blick darauf werfen.