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.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage