Three.js: Show world coordinate axes in corner of scene
This is probably a very basic problem, but I haven't found a solution yet and it's been bugging me. I'd like to show arrows indicating the world coordinate directions (x, y, z) in the bottom right hand corner of the camera like is done in Maya, so that when rotating the camera around an object, or moving through a scene, you can still identify the directions of the world coordinates. I've tried to accomplish this using two different approaches and neither has worked so far.
I have an object with three arrows as children using the THREE.ArrowHelper class, we'll call it XYZ for the moment. The first approach is to make XYZ a child of the scene and provide it a position calculated from the camera's current position plus an offset in the direction the camera is pointing and adjust so it appears down in the corner I want it to instead of in the center of the screen. I've almost got this working, as in the arrows maintain the correct rotation, but the position is a little bit funny, and I stopped going down this route because it was really 'jittery' when moving the camera around. I'm not sure whether it was a performance issue or something else.
The second method is to make XYZ a child of the camera with a local position offset and then reverse the rotation of the camera and apply the reversed rotation to XYZ so it matches world coordinates. I seem to be close using this method, but I can either get the position correct, or the rotation correct, not both.
I'm currently using the code XYZ.matrix.extractRotation( camera.matrixWorldInverse ); to provide me with the correct orientation for XYZ, but it's positioning is off. If I use XYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); then the position remains fine (attached to camera) but the orientation doesn't change.
If anyone has a quick hack to get this working it'd be much appreciated. If you've got a better method, than the one's I'm pursuing then that would also be helpful.
Answer
This has come up before here.
The trick is to add a second scene with a second camera, which has the same orientation as the original camera, but maintains a specified distance from the origin.
camera2.position.copy( camera.position );
camera2.position.sub( controls.target );
camera2.position.setLength( CAM_DISTANCE );
camera2.lookAt( scene2.position );
EDIT: Updated fiddle: http://jsfiddle.net/aqnL1mx9/
three.js r.69