How can I set the camera angle to something like the isometric projection?
To get an isometric view, you can use an OrthographicCamera
. You then need to set the camera's orientation properly. There are two ways to do that:
Method 1 - use camera.lookAt()
const aspect = window.innerWidth / window.innerHeight;
const d = 20;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
camera.position.set( 20, 20, 20 ); // all components equal
camera.lookAt( scene.position ); // or the origin
method 2 - set the x-component of camera.rotation
camera.position.set( 20, 20, 20 );
camera.rotation.order = 'YXZ';
camera.rotation.y = - Math.PI / 4;
camera.rotation.x = Math.atan( - 1 / Math.sqrt( 2 ) );
EDIT: updated fiddle: https://jsfiddle.net/vkjew52q/
three.js r.146
you need to use orbit and track controls , like in here :
http://codepen.io/nireno/pen/cAoGI
Edit:
also you may consider using ortho camera this post here may help you :
Three.js - Orthographic camera
an example can be seen here :
http://threejs.org/examples/canvas_camera_orthographic.html
and here is a link (udacity) explaining the use:
https://www.udacity.com/course/viewer#!/c-cs291/l-158750187/m-169414761
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With