Creating button in world space from screen space

I am trying to figure out how to create this button from image onto the world space. That is it should be fixed to a point in space. I have tried creating a 3D button but it is not exactly the way I wanted. That is, it looks very different from my GUI button. How do I achieve this? Please help

https://www.babylonjs-playground.com/#XCPP9Y#4433

Welcome aboard!

I don’t really understand. The 2D GUI button does stay fixed in screen space, as in your PG. Do you want your 3D button to stay fixed instead?

Yes I want the 3D button to be fixed in the scene. For example around a mesh (fixed on top of a model). How do I create the exact 2D button in the PG as 3D?

You can parent the 3D button to the mesh you want it to move along: Use a Parent - Babylon.js Documentation

Note that when I uncomment the 3D button I can’t see anything.

To have a 2D GUI element be applied to 3D meshes you can use CreateForMesh method of the AdvancedDynamicTexture class: Use the Babylon GUI - Babylon.js Documentation

https://www.babylonjs-playground.com/#XCPP9Y#4434

Here I have added the 3D button. Can you see the shape of this button and how it looks. Very different from the 2D button.

You can set the diffuse color of the button material to black so that the lighting does not affect the button:

https://www.babylonjs-playground.com/#XCPP9Y#4436

Or you can remove the light from the utility layer scene created by the 3D manager:

https://www.babylonjs-playground.com/#XCPP9Y#4437

Thank you @Evgeni_Popov but my issue is not with the light. You see the 3D button that is created is that of a square and the one I need is of a different shape. Close to a circle. How can I get this?

Maybe you can use MeshButton3D instead and make a sphere / disc mesh? To create a disc: Create Set Shapes - Babylon.js Documentation

Oh I was avoiding to use a mesh :confused: But if the default way to create a button is only using square, guess i have no other option.

Instead can I upload image itself as button? Such that I can upload it as sprite and add button to it?

A sprite is simply a plane, so it would not be different from a 3D button (but you can’t use a sprite in a 3D gui scenario as sprites are not meshes).

Note that everything in 3D GUI is a mesh underneath.

1 Like