Hi.
I have a scene similar to this one
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).
What usually happens when I resize the screen is this
I get empty spaces on sides. So is it possible to somehow shrink/stretch only the space between those platforms
Thanks
Would using overlaying multi-scenes help
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.
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.
Your example kinda works like that, but is there a way to avoid those stretching of the cylinders?
I’ve pondered this before. Never found a good solution, but thought maybe you could position the meshes based on the frustum somehow?
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…
You can try to work in NDC space and come back to world coordinates to position your meshes:
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.
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?
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.
Camera will be static, It will not move/rotate. I need it only on resize.
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.
