# Camera, maintain the meshes at the same position relative to screen during screen resize

**URL:** <https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320>\
**Category:** Questions\
**Created:** [March 19, 2020, 3:01pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320 "2020-03-19T15:01:51Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 19, 2020, 3:01pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/1 "2020-03-19T15:01:52Z")

</div>

Hi.

I have a scene similar to this one

[https://playground.babylonjs.com/#F8PF6Z#1](https://playground.babylonjs.com/#F8PF6Z#1)

The goal is to maintain the position of those two boxes. So the boxes always are positioned on the edge (left/right) of the screen (like image bellow).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a82d24c760ddbf37e4e3da2a2cb128fd20cab579.png)

What usually happens when I resize the screen is this

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/563303eb0aee36c6dd4f39efe82d295a23223717.png)

I get empty spaces on sides. So is it possible to somehow shrink/stretch only the space between those platforms

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4c78ffd21d44f9d5daf3dcb7bbc54892faccb6ef.png)

Thanks

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [March 19, 2020, 4:24pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/2 "2020-03-19T16:24:28Z")

</div>

Would using [overlaying multi-scenes](https://doc.babylonjs.com/how_to/multi_scenes#overlay-multiple-scenes) help

[https://www.babylonjs-playground.com/#L0IMUD#1](https://www.babylonjs-playground.com/#L0IMUD#1)

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 19, 2020, 5:13pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/3 "2020-03-19T17:13:26Z")

</div>

Hi. Not sure. During resize, those cylinders are stretching. I need them to keep ratio, but to stay at the same relative position from the edges (left/right) of the screen.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/0cf94b99acc77a32ac8106cc4e021ff6a77ecb9e.jpeg)

So, distance represented by the red lines to always stay the same, and the distance represented by green line to change depending on the width of the screen.

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 19, 2020, 5:14pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/4 "2020-03-19T17:14:24Z")

</div>

Your example kinda works like that, but is there a way to avoid those stretching of the cylinders?

---

<div class="post-metadata">

**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\
**Post date:** [March 20, 2020, 11:04am UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/5 "2020-03-20T11:04:36Z")

</div>

I’ve pondered this before. Never found a good solution, but thought maybe you could position the meshes based on the frustum somehow?

[https://doc.babylonjs.com/api/classes/babylon.frustum](https://doc.babylonjs.com/api/classes/babylon.frustum)

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 20, 2020, 12:02pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/6 "2020-03-20T12:02:40Z")

</div>

Yes. I was thinking about something like that. Can you help me with those though? I somehow cannot figure out how to use frustum and those methods? Not sure how to fill out the arguments of the methods…

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2020, 1:05pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/7 "2020-03-20T13:05:06Z")

</div>

You can try to work in NDC space and come back to world coordinates to position your meshes:

[https://playground.babylonjs.com/#F8PF6Z#2](https://playground.babylonjs.com/#F8PF6Z#2)

NDC space is -1 \< x \< 1, -1 \< y \< 1, -1 \< z \< 1.

So, (-1, -1, -1) coordinates correspond to the bottom-left pixel on the screen, in the near plane of the camera (z=-1). By calculating the right coordinates in this space for your boxes and projecting back to world space, the boxes will be located where you want.

See the `setPosition` function in the PG.

For the function to work, you must have the width of your objects to be 1, so I have updated accordingly the y and z dimensions of the boxes.

The `mesh.rotation = camera.rotation` is there to always have the boxes face the camera and don’t rotate.

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 20, 2020, 1:41pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/8 "2020-03-20T13:41:10Z")

</div>

Wow. Thank you, I think this will help me a lot. I need to go through the code few times to understand what is going on, but it is helpful. I think I should implement this to be calculated on resize event, instead on every frame. Is that possible?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2020, 2:06pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/9 "2020-03-20T14:06:32Z")

</div>

No it is not possible because the boxes must be repositionned each time the camera moves / rotates.

You can avoid calling `setPosition` only if the camera does not move and the screen is not resized.

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [March 20, 2020, 2:37pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/10 "2020-03-20T14:37:57Z")

</div>

Camera will be static, It will not move/rotate. I need it only on resize.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2020, 4:58pm UTC](https://forum.babylonjs.com/t/camera-maintain-the-meshes-at-the-same-position-relative-to-screen-during-screen-resize/9320/11 "2020-03-20T16:58:03Z")

</div>

Ok, so you can only call it on the resize event.

Note that you can offset the position of the boxes by changing the pivot position.