Hi all!
I currently have a situation where my object renders a different size on 2 different browsers.
The issue was: my bookmark bar. When I dissabled this, my browser screens were almost identical in size. That’s why it came to me: the model is rendering in different sizes depending on the size of the canvas.
how can I make sure that, no matter what the size of the canvas is (or the container where the canvas is residing in), the model is always the exact same size?
It depends - vertical size of the canvas is the part that’s scaling when you resize the browser / the canvas element. Horizontal aspect adjusts to take into account vertical size of the canvas and FOV of the camera.
The easiest way would be to just have a constant size of the canvas (or at least a constant aspect ratio of it.)
hi @mjurczyk Thanks for answering!
well the thing is, we are using react fiber, so the canvas is scaling automatically with no real possibility to disable it… also the parent of the canvas is sticky so that the model is overlaying content for animation purposes. So from the moment the page is loaded in a browser window with less real-estate the position and sizer of the model is just off. And I don’t know if math should be used here to update fov or zoom or… whatever basically just to get that model to always maintain its same size initially and on resize.
three.js docs Is this the function you want to achieve?
Yes, use Math to recalculate FOV only if you use perspective camera. For orthographic camera update the bounds.