CODEWITHSUNDEEP
three.js
Daniel Ribeiro
Daniel Ribeiro

Reputation: 10234

Isometric camera with THREE.js

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

Upvotes: 25

Views: 24085

Answers (1)

WestLangley
WestLangley

Reputation: 104833

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

Upvotes: 58

Related Questions