# Responsive object position/scale

**URL:** <https://discourse.threejs.org/t/responsive-object-position-scale/71335>\
**Category:** Questions\
**Tags:** responsive, scaling, object3d, scale, positioning, position, models, 3d-model\
**Created:** [September 27, 2024, 10:38pm UTC](https://discourse.threejs.org/t/responsive-object-position-scale/71335 "2024-09-27T22:38:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aka\_lux](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aka_lux/32/51593_2.png) [@aka\_lux](https://discourse.threejs.org/u/aka_lux)\
**Post date:** [September 27, 2024, 10:38pm UTC](https://discourse.threejs.org/t/responsive-object-position-scale/71335/1 "2024-09-27T22:38:40Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f5c887ce063aff3d3b66dcbdfd83f17622ed4bf.png)

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

 ![Screen2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4bc2aa115e44c0a2b4d06f7d81a79b0d9ccf11ee.png)

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

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [September 27, 2024, 11:03pm UTC](https://discourse.threejs.org/t/responsive-object-position-scale/71335/2 "2024-09-27T23:03:56Z")

</div>

You can use [these](https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269) functions to place objects relatively to the viewport size (by multiplying the position, it’ll act similarly to “%” in CSS.)

---

<div class="post-metadata">

**Author:** ![aka\_lux](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aka_lux/32/51593_2.png) [@aka\_lux](https://discourse.threejs.org/u/aka_lux)\
**Post date:** [September 27, 2024, 11:19pm UTC](https://discourse.threejs.org/t/responsive-object-position-scale/71335/3 "2024-09-27T23:19:01Z")

</div>

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.