fitToBox resets my camera rotation. how can I keep the angle?

[mustafaahci]

Hi,

I am trying to set my camera to show a top-left view of my scene (like rotated 30° to the left and 15° down) when a button is clicked. Here's the code I am using:

cameraControlsRef.current?.reset(true);
cameraControlsRef.current?.rotate(DEG2RAD * -30, DEG2RAD * -15, true);
cameraControlsRef.current?.fitToBox(scene, true, PADDING);

The problem is, the fitToBox call seems to override my rotation and kind of resets?

Is there a way to fit the scene while keeping the rotation I want?
(and/or a better way to show the top-left view of my object while fitting it within the camera?)

I am still learning three.js and drei etc., so please bear with me.

Thanks!

[SelfMade2001]

Inside the fitToBox source code there is a comment stating // round to closest axis ( forward | backward | right | left | top | bottom ).

I also assumed, the fitToBox method would actually only zoom the camera to make it fit the box, which is somewhat more complex than to just rotate to the right axis. I think I know a solution for this problem, if I am successful I will post it.

[SelfMade2001]

Solved it! :D

@yomotsu Maybe this is worth a look. Unfortunately, I'm not familiar enough with your codebase (and TypeScript) to make a commit myself, but the logic behind my dollyToFitBox() function could serve well as an alternative to the existing fitToBox() function. It could be named fitToBoxWithoutRotating() or the fitToBox() function could be given a new parameter that optionally switches to the new logic. Like the OP, I also initially thought that fitToBox wouldn't rotate the camera, because in my view, there are more use cases that require the camera rotation to remain unchanged.

What is the logic behind my code? The camera has an FOV in the x-direction and an FOV in the y-direction. Both must be taken into account so that the box leaves neither the horizontal nor the vertical bounds of the viewport. When the camera is positioned as in this sketch that I found online, one can derive the formula (Math.abs(py) * margin) / Math.tan(vFov / 2) for the distance. Here, vFov corresponds to alpha, and py or rather Math.abs(py) * margin corresponds to o. Now, since the box points are not directly above the origin, they must be shifted in the x-direction in this sketch (this will later result in -pz).

Because the camera does not always match this sketch (in the sketch, x = 0) but can also look at the box from an angle from above, we switch the coordinate system to one for which this sketch is always valid. The new x-coordinate points in the horizontal viewport direction, the new y-coordinate points in the vertical viewport direction, and the new z-coordinate points from the camera to the target. In the sketch, the horizontal axis is then no longer the x-axis but the z-axis, and the vertical axis is no longer the y-axis but either the x or y-axis. This results in (Math.abs(py) * margin) / Math.tan(vFov / 2) - pz and (Math.abs(px) * margin) / Math.tan(hFov / 2) - pz, respectively.

We now know the required camera distance for each point to be within the viewport (once for the horizontal and once for the vertical viewport axis). Ultimately, we just have to set the camera to the maximum of these minimum distances, and then even the last point will be just barely inside the viewport.

I hope this code helps someone :D

/**
 * Dolly camera so that a Box3 fits perfectly into the view. Moves the target to box center while keeping the camera's polar angles
 *
 * @param {THREE.Box3} box - The bounding box to fit.
 * @param {THREE.PerspectiveCamera} camera - The camera.
 * @param {CameraControls} controls - The camera-controls instance.
 * @param {number} [margin=1.0] - Optional margin multiplier (>1 zooms out a bit).
 */
function dollyToFitBox(box, camera, controls, margin = 1.0) {
    // Move target to box center and keep current orientation
    const center = box.getCenter(new THREE.Vector3());
    const azimuth = controls.azimuthAngle;
    const polar = controls.polarAngle;
    controls.setTarget(center.x, center.y, center.z, false);
    controls.rotateTo(azimuth, polar, false);

    // Compute vertical and horizontal FOV in radians
    const vFov = THREE.MathUtils.degToRad(camera.fov);
    const hFov = 2 * Math.atan(Math.tan(vFov / 2) * camera.aspect);

    // build camera basis vectors (relative to camera target)
    // forward is pointing from the camera to the target
    // up is pointing in the cameras viewport y direction
    // right is pointing in cameras viewport x direction
    const target = controls.getTarget(new THREE.Vector3());
    const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(
        camera.quaternion
    );
    const up = new THREE.Vector3(0, 1, 0).applyQuaternion(camera.quaternion);
    const right = new THREE.Vector3(-1, 0, 0).applyQuaternion(
        camera.quaternion
    );

    // get all 8 corners of the box
    const points = [
        new THREE.Vector3(box.min.x, box.min.y, box.min.z),
        new THREE.Vector3(box.min.x, box.min.y, box.max.z),
        new THREE.Vector3(box.min.x, box.max.y, box.min.z),
        new THREE.Vector3(box.min.x, box.max.y, box.max.z),
        new THREE.Vector3(box.max.x, box.min.y, box.min.z),
        new THREE.Vector3(box.max.x, box.min.y, box.max.z),
        new THREE.Vector3(box.max.x, box.max.y, box.min.z),
        new THREE.Vector3(box.max.x, box.max.y, box.max.z),
    ];

    // Find required distance to fit all corners
    let distance = 0;
    const tanH = Math.tan(hFov / 2);
    const tanV = Math.tan(vFov / 2);

    for (const p of points) {
        // project corners -> this makes the point's coordinates go from world coordinate system to the newly created camera basis coordinate system
        const rel = p.clone().sub(target);
        const px = rel.dot(right);
        const py = rel.dot(up);
        const pz = rel.dot(forward);

        // for the camera basis coordinate system this is the equation to get the distance a point requires the camera to have
        // this minimum camera distance is calculated for the viewports x and y directions using the horizontal and vertical fov respectively
        const dH = (Math.abs(px) * margin) / tanH - pz;
        const dV = (Math.abs(py) * margin) / tanV - pz;

        // each point gives us two minimum distances
        // this for loop should make distance be the biggest distance calculated, which is the distance at which every point is guaranteed to be in the camera's viewpoint
        distance = Math.max(distance, dH, dV);
    }

    // Dolly camera to computed distance
    controls.dollyTo(distance, false);
}