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

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.

3 Likes