Hi, I am new to babylonjs. I would like to know how to display a rectangle or circle at the top right or the screen? And this rectangle should be always display at the same position no mater how user move or rotate the 3D camera. Can show one show me how to achieve this. Thanks!
1 Like
hi welcome to forum
a lot way we can make it but the simple way is use camera position
https://playground.babylonjs.com/#Z1X299
you can calculate the left and top position by canvas screen and you can scale your box by scaling
Hi @cheng and welcome. Depending what you want the rectangle for an alternative is to use https://doc.babylonjs.com/How_To/Gui
1 Like
Thanks guys! Both way works!
Hey Nasi, can you please elaborate more on using the top and left solution? I have a mesh that shows world xyz axis, I want it to stay fixed on screen XY position although allow it to rotate around in according to the camera. Is this possible?
I’ve checked the mesh documentation and it has a top and left attribute. I tried using canvas width height to put it in a corner although it did not have any effect.
thanks
hi
Welcome @kzaky
how are you 
you push me to start New Mesh Base GUI
that not in exact position for now but that is so close
https://playground.babylonjs.com/#9VALBN#3
Thanks @nasimiasi. Since the box does not transform corresponding to camera movement due to .parent=camera, would it be possible if I apply its own transformnode to the box mesh to transform along with the camera? since I want it to allow it rotate although stay in the same place. I forgot to state that I’ll be having a 3d mesh.
Thank you!
can you show me any screenshot for what we most done
nasimiasi, thanks for helping out. Here’s the screenshot.
. What I am trying to achieve is to have the xyz axis (mesh) fixed on user screen on bottom right, While also being able to rotate according to camera. I’ve currently removed the mesh.parent = camera for the xyz axis because it wasn’t rotating. But it helped out with getting the position fixed to screen.