25

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

Daniel Ribeiro
  • 10,156
  • 12
  • 47
  • 79

1 Answers1

56

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

Isometric View Using Orthographic Camera

EDIT: updated fiddle: https://jsfiddle.net/vkjew52q/

three.js r.146

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 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