Three.js: Show world coordinate axes in corner of scene
With new three.js versions you can use:
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
Reference: AxesHelper
var camera, scene, renderer, geometry, material, mesh, axisHelper, localToCameraAxesPlacement;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
camera.up = new THREE.Vector3(0,0,1);
scene.add(camera);
axisHelper = new THREE.AxisHelper( 0.1 )
localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45, -2); // make sure to update this on window resize
scene.add(axisHelper)
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
var t = 0
function render() {
t++
camera.position.x = Math.cos(t/80) * 500
camera.position.y = Math.sin(t/80) * 500
camera.lookAt(mesh.position)
camera.updateMatrixWorld()
var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone())
axisHelper.position.copy(axesPlacement);
renderer.render(scene, camera);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>This is a "quick and dirty" way to add an AxisHelper without creating an additional scene. It works by moving the axis helper in front of the camera on every render.
// Initialize
var scene = getScene();
axisHelper = new THREE.AxisHelper( 0.1 );
var localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45,-2); // make sure to update this on window resize
scene.add(axisHelper);
// On every render
var camera = getCamera();
camera.updateMatrixWorld();
var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone());
axisHelper.position.copy(axesPlacement);
Note: This answer applies to legacy versions of three.js.
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 );
three.js r.69