Responsive object position/scale

Questions
, , , , , , ,
1

Hi everyone, I’m trying to figure out the best way to make the position (and scale if needed) of the model across all devices without relying only on match medias. Ofc I can’t use %, so is there something built into Three.js that could help me achieve the best result? Also any other solution (if someone has it) is much appreciated. Right now I am using a orthographic camera in my scene.

This is what happens:
I want the model to position like this

Screen1
Screen11917×986 151 KB

But of course when I resize the screen it gets cut out like this

Screen2
Screen21061×990 44.8 KB

This is how I resize the orthographic camera whenever the page gets resized:

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);
2

You can use these functions to place objects relatively to the viewport size (by multiplying the position, it’ll act similarly to “%” in CSS.)

2 Likes
3

Thank you I’ll check this out properly when I have the time. Just to know, in that case he is using a perspective camera, but I use an orthographic camera, so how would that work since I don’t have the fov (if you know ofc), thanks.