Positioning the GUI relative to Mesh element

Hello, I’m new to babylonjs. I have GUI text -
const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI(
‘UI’,
true,
this.scene
);
const textBlock = new TextBlock();
textBlock.text = ‘text’;
textBlock.color = ‘white’;
textBlock.fontSize = 12;
advancedTexture.addControl(textBlock);
textBlock.linkWithMesh(meshElement);

I need to position a GUI text element relative to a mesh element, such that the text is always just below the mesh element, regardless of the camera’s position

Hello and welcome :slight_smile:

  • Is there a reason why you want to use 2D GUI ? Because, you could as well use 3D GUI which would be simpler to handle the mesh parenting

  • If you want to stick to 2D for some reason, you need to project 3D–>2D and adapt text position in the render loop

  • A third option (If it’s only about text) would be to use a TextMesh like I did here above the columns

++
Tricotou

Do you need something like this? - https://playground.babylonjs.com/#XCPP9Y#21872
More info here - Babylon.js docs

1 Like

Ahah, I didn’t know that it was already implemented, I was thinking about recoding the 3D → 2D for @Stanikkje myself xD

Edit : OK, just for the pleasure of coding :grin:Playground

1 Like

Is there an option to make the text stay still? Basically I want to repeat the positioning of the planet and text like here Солнечная система - 3D модель для детей / учеников и взрослых (Бесплатно) - MKS.SPACE

Could you share a screen cap or video ? I can not open the link

i get message - <
Sorry, new users can not upload attachments.>

In this case you may use HTML element as here - https://playground.babylonjs.com/#YU7J32#163

I need to place the text always at the bottom of the mesh element, so that when the camera moves further or closer, the text is always positioned relative to the mesh element and does not decrease in size. I’m not sure if I need to use GUI text. Unfortunately, I still haven’t found the solution I need.

Finally managed to upload the video

Ok, if you want to attach the GUI to the mesh in 2D, and as well take into consideration it’s size in the screen… I think you need a custom setup :

  • Vertices Local → World
  • Project Vertices 3D → 2D
  • Compute Bounding Box 2D
  • Attach to GUI

gui

Playground

Not the most efficient though, but it does the job :stuck_out_tongue:

++
Tricotou

wow, this is really what we need. Does babylonjs have any out-of-the-box solutions for this case? It certainly looks complicated, if there are a lot of mesh elements with such texts, will this greatly affect performance? If instead of GUI text there is mesh text, will it be easier to implement?

if the mesh is behind the camera, then the text attached to this mesh is still visible:(

Sorry I missed your previous post

I don’t think so… Sticking to the bottom of the mesh in 2D is quite specific

The current version I would say yes, since it’s computing on all the vertices to get the bouding box.

Most likely if you have heavy meshes to track, is will be better to use 3D text, and stick them under the meshes in 3D

You can solve this by checking the dot product between camera direction (camera.getTarget().subtract(camera.position)) and direction from camera to mesh (mesh.position.subtract(camera.position)), the dot product is >0 only if the mesh is in front of camera :arrow_right: Playground