I'm currently exploring the most effective method to adjust the position and scale of a model across various devices without solely relying on match medias. Since using percentages is not an option, I am wondering if Three.js has any built-in features that could assist me in achieving optimal results. Any alternative solutions are also welcomed. As of now, I am utilizing an orthographic camera in my scene.
The issue at hand is as follows: I intend for the model to be positioned like this https://i.sstatic.net/oJHH1ONA.png
However, when I resize the screen, it ends up being cut off like this https://i.sstatic.net/nt7NcbPN.png
My resizing code is quite straightforward:
rendererSize.width = window.innerWidth;
rendererSize.height = window.innerHeight;
aspect = rendererSize.width / rendererSize.height;
//* [ORTHOGRAPHIC CAMERA]
camera.left = -f * aspect;
camera.right = f * aspect;
camera.updateProjectionMatrix();
renderer.setSize(rendererSize.width, rendererSize.height);