21

How can I set the camera angle to something like the isometric projection?

Daniel Ribeiro
  • 9,936
  • 12
  • 44
  • 76

2 Answers2

49

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()

var aspect = window.innerWidth / window.innerHeight;
var 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 ) );

Isometric View Using Orthographic Camera

fiddle: http://jsfiddle.net/q3m2kh5q/

three.js r.73

WestLangley
  • 97,891
  • 9
  • 255
  • 258
  • If you set the camera position to 100 on the Z axis then you will maintain will prevent clipping the grid with the near clip plane on the camera. In order to keep the same isometric view though you will also need to update the X Y positions to match. Line 44 `camera.position.set( 100, 100, 100 );` – Xander Luciano Apr 14 '17 at 15:03
1

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

Community
  • 1
  • 1
ProllyGeek
  • 14,987
  • 7
  • 49
  • 71