Isometric view using PerspectiveCamera

I want to show the loaded model as in an isometric view in my scene.
I’m using PerspectiveCamera, also doing camera.position.set(20, 20, 20);
However, in some cases (depends on model size), the model is not perfectly fit to the scene, zoomed in or zoomed out. I am able to see isometric view, but how to make fit the model to my scene?


What about THREE.OrthographicCamera()?

How about using:

var OFFSET = 20;

camera.position.set(object.geometry.boundingSphere.radius + OFFSET, 0, 0 );

var sphericalCoord = new THREE.Spherical();
sphericalCoord.setFromVector3( camera.position );
sphericalCoord.phi = THREE.Math.degToRad( 45 );
sphericalCoord.theta = THREE.Math.degToRad( 45 );

var vec = new THREE.Vector3().setFromSpherical(sphericalCoord);

camera.position.set( vec.x, vec.y, vec.z );
1 Like

Combining both approaches:

camera.position.setScalar(1).setLength(object.geometry.boungindSphere.radius + OFFSET);

1 Like

but still the model is not fit to scene.

May be you can change the offset value as per your need.
If still it doesn’t work, would encourage you to share a sample jsfiddle.

I think, you’re looking for something like this:


this may also be of some interst?

This time being I have handled the situation by

Making camera x and y position to 0, and z position by model size.
Then I used OrbitControls’s rotateLeft and rotateUp methods to make it to appear isometric.

camera.position.set(0, 0, Math.max(mesh.geometry.boundingBox.max.x * 5, mesh.geometry.boundingBox.max.y * 5, mesh.geometry.boundingBox.max.z * 5));