Three.js camera does not orbit correctly around model when using predefined positions

Questions
1

I am working with Three.js and trying to implement predefined camera views (like front, top, side, isometric) for a 3D model.

I calculate the bounding box of the model and position the camera based on that. However, the camera does not behave as expected when switching between predefined positions.

Note:

The model has its own position and orientation (it is not centered at the origin and has a default rotation applied). Because of this, the model may appear upside down or offset when the camera position changes. This might be affecting how the camera orbit behaves.

Expected behavior:
The camera should orbit around the model and always face the model center correctly when switching between views.
enter image description here

Actual behavior:
The camera position updates, but the model does not appear to rotate/orbit correctly. It looks like the camera is not rotating around the model as expected.
enter image description here

Minimal code:

  zoomCameraToModel(model: THREE.Object3D) {
    const box = new THREE.Box3().setFromObject(model);
    const center = new THREE.Vector3();
    const size = new THREE.Vector3();

    box.getCenter(center);
    box.getSize(size);

    const maxDim = Math.max(size.x, size.y, size.z);
    const fov = this.camera.fov * (Math.PI / 180);
    let distance = maxDim / (2 * Math.tan(fov / 2));

    distance *= 1.5;

    this.orbitControls.target.copy(center);

    const direction = new THREE.Vector3(1, 1, 1).normalize();
    const newPosition = center.clone().add(direction.multiplyScalar(distance));
    this.camera.position.copy(newPosition);

    let cameraDistance = Math.abs(maxDim / 2 / Math.tan(fov / 2));
    cameraDistance *= 1.5;

    this.orbitControls.maxDistance = cameraDistance * 3;
    this.orbitControls.update();
  }

Full reproducible example:
https://stackblitz.com/edit/vitejs-vite-a4ydxmes?file=src/components/scene.ts

Question:
What is the correct way to make the camera orbit around a model when using predefined positions?
Am I missing something in how lookAt or camera transformations work?

Any help or guidance would be appreciated.

2

If you have OrbitControls in your app, it will override your .lookAt.

Instead… set the controls.target vector3 to the point you want it to look at, and OrbitControls will now lookAt and orbit around that point.

3

I am using OrbitControls and tried updating both the camera position and the control target, but the behavior is still not correct.

Expected:

The camera should move to a predefined position (e.g., isometric view) and continue to orbit correctly around the model.

Actual:

The camera position updates, but the orbit behavior feels incorrect — the model does not stay centered during interaction.

Here is my updated code:

zoomCameraToModel(model: THREE.Object3D) {

const box = new THREE.Box3().setFromObject(model);
const center = new THREE.Vector3();
const size = new THREE.Vector3();
box.getCenter(center);
box.getSize(size);

const maxDim = Math.max(size.x, size.y, size.z);
const fov = this.camera.fov * (Math.PI / 180);
let distance = maxDim / (2 * Math.tan(fov / 2));

distance *= 1.5;

this.orbitControls.target.copy(center);

const direction = new THREE.Vector3(1, 1, 1).normalize();
const newPosition = center.clone().add(direction.multiplyScalar(distance));
this.camera.position.copy(newPosition);

let cameraDistance = Math.abs(maxDim / 2 / Math.tan(fov / 2));
cameraDistance *= 1.5;

this.orbitControls.maxDistance = cameraDistance * 3;

this.orbitControls.target.copy(center);

this.orbitControls.update();

}
Am I missing any required step when using OrbitControls with predefined camera positions?

Should lookAt() still be used, or does OrbitControls fully control the camera orientation?

Note:

The model has its own position and orientation (it is not centered at the origin and has a default rotation applied). Because of this, the model may appear upside down or offset when the camera position changes. This might be affecting how the camera orbit behaves.

4

Use ArcballControls instead of OrbitControls, maybe it supports the rotation that you need.

However, if you do need specifically OrbitControls, you might need to update the up direction.

1 Like
5

Thank you, will try