Three.js scene scale changes when vertically resizing

Question

I want to prevent my scene from scaling when the browser window resizes. Specifically I've noticed horizontal resizing does not affect the scale while vertical resizing does.

I have a fairly "standard" Three scene implemented with the following specifics to handle resize changes; Try to resize the browser window with any https://threejs.org/examples scene horizontally only then vertically only -- notice the scale does not change when resizing horizontally but does when resizing vertically.

on resize:

renderer.setSize(width, height, true);
camera.aspect = width / height;
camera.updateProjectionMatrix();

That's the way the camera's field-of-view (FOV) works. Let's say you have a vertical FOV of 45deg: if you have a cell-phone window that's 400px tall, or a huge display at 2,000px all 45-degrees will be rendered within the available pixels, so your objects will appear larger at 2000px. If you want to fit an object within the camera's viewport, see here: https://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object/14614736 — M -, Dec 03 '20 at 02:03
Thank you bunches @Marquizzo! Adjusting the FOV based on the window height appears to be preventing the apparent scaling when resizing vertically. ```camera.fov = 2 * Math.atan( height / ( 2 * cameraPosition.z ) ) * ( 180 / Math.PI ); ``` — Ben Korody, Dec 03 '20 at 15:34

Three.js scene scale changes when vertically resizing

0 Answers0