[Solved] Fitting an object to cover the whole canvas a la CSS `object-fit: cover`

Ah, nice!

Actually no, the vertical fov of the camera is constant in Three.js (unless you explicitly change it), and the output of the scene is dependent on both the vertical fov and the view aspect ratio (and not the vertical resolution).

This is why, when you resize any three.js scene vertically, it seems to always vertically fit the same amount content (but you will see more or less content of the left and right sides of the scene depending on if you shrink or grow the view heigh, respectively).

Take any default three.js example (not this special one we made), and shrink the height of the window so that the width is a lot larger than the height, and you’ll see what I mean: the content will shrink so that the same vertical space appears in the scene, but you will notice a lot more content is visible on the left and right sides of the scene.

Essentially Three.js always re-calculates the horizontal fov based on both the vertical fov and the aspect ratio of the view.

This is why in our particular example we had kept vfov constant, but were recalculating the hfov.

1 Like