Three.js: Mostrar eixos de coordenadas mundiais no canto da cena

Este é provavelmente um problema muito básico, mas ainda não encontrei uma solução e está me incomodando. Gostaria de mostrar as setas indicando as direções de coordenadas mundiais (x, y, z) no canto inferior direito da câmera, como acontece no Maya, de modo que, ao girar a câmera em torno de um objeto ou se mover por uma cena, você ainda pode identificar as direções das coordenadas mundiais. Eu tentei fazer isso usando duas abordagens diferentes e nenhuma delas funcionou até agora.

Eu tenho um objeto com três setas como crianças usando oTHREE.ArrowHelper classe, vamos chamá-loXYZ para o momento. A primeira abordagem é fazerXYZ um filho da cena e fornecer uma posição calculada a partir da posição atual da câmera, mais um deslocamento na direção que a câmera está apontando e ajustar para que ele apareça no canto que eu quero, em vez de no centro da tela. Eu quase consegui isso funcionar, como nas setas manter a rotação correta, mas a posição é um pouco engraçada, e eu parei de ir por esse caminho porque estava muito 'nervoso' quando movia a câmera. Não tenho certeza se foi um problema de desempenho ou algo mais.

O segundo método é fazerXYZ um filho da câmera com um deslocamento de posição local e, em seguida, inverta a rotação da câmera e aplique a rotação invertida paraXYZ então coincide com as coordenadas mundiais. Eu pareço estar perto usando este método, mas eu posso obter a posição correta, ou a rotação correta, não ambos.

Atualmente estou usando o códigoXYZ.matrix.extractRotation( camera.matrixWorldInverse ); para me fornecer a orientação correta paraXYZ, mas o posicionamento está desativado. Se eu usarXYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); então a posição permanece bem (anexada à câmera), mas a orientação não muda.

Se alguém tiver um hack rápido para obter este trabalho seria muito apreciado. Se você tem um método melhor do que o que estou seguindo, isso também seria útil.

** - EDIT - ** Deveria provavelmente mencionar que você pode encontrar a versão de trabalho aqui - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Estou armazenando meu código no Google Drive, mas trabalhando localmente usando wamp e aliasing, o que significa que quaisquer alterações que eu fizer localmente serão refletidas on-line assim que o Google Drive sincronizar. I.E. pode ser quebrado quando você der uma olhada.

questionAnswers(3)

yourAnswerToTheQuestion