My goal is to ensure that my 3D objects always "fit" inside the window. Here is an overview of my current code:
export function onWindowResize(camera, renderer) {
const canvas = renderer.domElement;
const width = window.innerWidth;
const height = window.innerHeight;
const connection = getBoundingBox(connectionGroup);
const needResize = canvas.width !== width || canvas.height !== height;
const isPortrait = connection.width < connection.height;
if (needResize) renderer.setSize(width, height);
const aspect = isPortrait ? width / height : height / width;
const frustumSize = Math.max(connection.width, connection.height);
//Front View
if (isPortrait) {
camera.left = (-frustumSize * aspect) / 2;
camera.right = (frustumSize * aspect) / 2;
camera.top = frustumSize / 2;
camera.bottom = -frustumSize / 2;
} else {
camera.left = -frustumSize / 2;
camera.right = frustumSize / 2;
camera.top = (frustumSize * aspect) / 2;
camera.bottom = (-frustumSize * aspect) / 2;
}
camera.updateProjectionMatrix();
}
Currently, everything functions as intended: the object fits within the window based on its height or width. However, a problem arises when the object's height exceeds the window height but still fits within the maximum width (or vice versa), resulting in cropping of the model.
I am only looking to fit the object on the initial display, after which the user can freely utilize orbit controls.
MAX WIDTH but models height exceed window/camera height
I have experimented with manually setting camera.zoom, but struggled to determine the correct value for it. This led to malfunctions in my orbit controls.