How to dynamically adjust the camera in three js

Mugen87 · May 27, 2020, 7:49am

One way to solve this issue is by changing camera parameters based on the bounding box of your mesh. This approach is used by viewer application like the three.js based gltf-viewer. Check out the following code listing for more information:

github.com

donmccurdy/three-gltf-viewer/blob/a5fd64686f55a8cb3effd8914b2cbcca6b6cbae1/src/viewer.js#L266-L293


const box = new Box3().setFromObject(object);
const size = box.getSize(new Vector3()).length();
const center = box.getCenter(new Vector3());

this.controls.reset();

object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
this.controls.maxDistance = size * 10;
this.defaultCamera.near = size / 100;
this.defaultCamera.far = size * 100;
this.defaultCamera.updateProjectionMatrix();

if (this.options.cameraPosition) {

  this.defaultCamera.position.fromArray( this.options.cameraPosition );
  this.defaultCamera.lookAt( new Vector3() );

} else {

This file has been truncated. show original

The code also centers the object which is probably not required in your scene.

Topic		Replies	Views
How to dynamically adjust the camera for different models? Questions camera , react-three-fiber	3	1570	April 25, 2022
How to set camera position dynamically? Questions camera-controls , camera , perspective-camera	0	701	April 25, 2022
Threejs mobile responsiveness Questions resizing	4	2834	April 8, 2021
Different dynamic shape on the bottom of scene Questions geometry , shaders	8	1121	September 26, 2021
How to make camera face a cube face on load on the page Questions perspective-camera	6	1714	June 26, 2020

How to dynamically adjust the camera in three js

Related topics