My 3D product scene looked perfect on my 16:9 monitor and then the hero object was tiny and floating in the corner on a phone in portrait. Classic: I was only adjusting aspect on resize, not the actual framing.
The realization was that for a fixed vertical FOV, portrait aspect crops horizontally, so I need to widen FOV (or dolly back) when aspect drops below 1. I asked the model to compute an effective FOV from a target 'fit radius' and the current aspect so the subject stays framed on any screen.
Posting the prompt. Does anyone switch to an orthographic rig for very wide displays instead?
Write a three.js resize handler that keeps a subject of known bounding radius `R` (centered at origin) framed identically across aspect ratios. Requirements:
- On resize: set `camera.aspect = w/h`.
- Compute the FOV needed to fit radius R at the camera's current distance D for BOTH axes: vertical fov handles height, and for width divide by aspect. Take the max so the subject is never clipped in portrait.
- Convert: `vFov = 2*atan(R / D)`; if `aspect < 1`, use `hFov` derived as `2*atan(tan(vFov/2)/aspect)` and set camera.fov from the binding axis. Clamp fov to [25, 75] deg to avoid distortion.
- Call `updateProjectionMatrix()` and update the renderer + composer sizes with DPR capped at 2.
- Debounce resize to once per animation frame.
- Expose a `fitPadding` (default 1.15) multiplier on R.
Walk through why portrait aspect requires widening FOV and show the clamp preventing fisheye on ultrawide.