Perspective math

Three.js Camera FOV Calculator

Calculate a PerspectiveCamera field of view that frames an object by height, distance, aspect ratio, and margin.

Copy the camera setup

This snippet keeps the math explicit so you can adapt it to a bounding box from a loaded GLB model.

const objectHeight = 2;
const distance = 5;
const aspect = 1.777;
const margin = 10 / 100;

const framedHeight = objectHeight * (1 + margin);
const fov = THREE.MathUtils.radToDeg(
  2 * Math.atan(framedHeight / (2 * distance))
);

camera.fov = 24.81;
camera.aspect = aspect;
camera.position.set(0, objectHeight / 2, distance);
camera.lookAt(0, objectHeight / 2, 0);
camera.updateProjectionMatrix();

When to use this

Use it when a model needs consistent framing across screen sizes, especially product viewers, configurators, avatars, thumbnails, and landing page hero scenes.

FAQ

PerspectiveCamera.fov is vertical FOV in degrees. Horizontal FOV depends on aspect ratio, so it changes when the viewport changes.

How this maps to Box3

For imported GLB files, compute a Box3 after the model loads, use its height as the object height, then calculate the distance or FOV before updating OrbitControls target.

Common framing mistake

A desktop-perfect camera can crop wide objects on mobile. Compare vertical and horizontal fit, then choose the larger distance when the viewport is narrow.