Three.js: Mostrar ejes de coordenadas mundiales en la esquina de la escena

Este es probablemente un problema muy básico, pero aún no he encontrado una solución y me ha estado molestando. Me gustaría mostrar flechas que indican las direcciones de coordenadas mundiales (x, y, z) en la esquina inferior derecha de la cámara, como se hace en maya, de modo que al girar la cámara alrededor de un objeto o moverse a través de una escena, Todavía puedes identificar las direcciones de las coordenadas del mundo. He intentado lograr esto utilizando dos enfoques diferentes y ninguno ha funcionado hasta ahora.

Tengo un objeto con tres flechas como niños usando elTHREE.ArrowHelper clase, lo llamaremosXYZ por el momento. El primer enfoque es hacerXYZ un niño de la escena y proporcione una posición calculada a partir de la posición actual de la cámara más un desplazamiento en la dirección hacia donde apunta y ajusta la cámara para que aparezca en la esquina que quiero en lugar de en el centro de la pantalla. Casi lo tengo funcionando, ya que las flechas mantienen la rotación correcta, pero la posición es un poco rara, y dejé de seguir esta ruta porque estaba realmente "nervioso" al mover la cámara. No estoy seguro de si fue un problema de rendimiento o algo más.

El segundo método es hacerXYZ un hijo de la cámara con un desplazamiento de posición local y luego invierta la rotación de la cámara y aplique la rotación invertida aXYZ por lo que coincide con las coordenadas mundiales. Parece que estoy cerca usando este método, pero puedo obtener la posición correcta o la rotación correcta, no ambas.

Actualmente estoy usando el códigoXYZ.matrix.extractRotation( camera.matrixWorldInverse ); para darme la orientación correcta paraXYZ, pero su posicionamiento está apagado. Si yo usoXYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); entonces la posición permanece bien (adjunta a la cámara) pero la orientación no cambia.

Si alguien tiene un truco rápido para hacer que esto funcione, sería muy apreciado. Si tienes un método mejor que el que estoy siguiendo, entonces eso también sería útil.

** - EDITAR - ** Probablemente debería mencionar que puede encontrar la versión de trabajo aquí - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Estoy almacenando mi código en google drive pero trabajando localmente usando wamp y aliasing, lo que significa que cualquier cambio que realice localmente se reflejará en línea tan pronto como se sincronice google drive. ES DECIR. Puede ser roto cuando echas un vistazo.

Respuestas a la pregunta(3)

Su respuesta a la pregunta