Babylon gui Rectangle and textblock

Questions
1

Hi, I would like to create a gui for showing hotspot description using babylon gui.
I am using Rectangle and linking it with hotspot mesh. then creating a textblock and setting text to it.
the issue I am facing is… textblock is controlling letter width and height when we do scaleX and scaleY.

and when coming back to set with of Rectangle… I am not able to… like when I give with and height different but both reflects same (max of width and height).

Reference: The BMW i8 Protonic Red Edition 2016 - Buy Royalty Free 3D model by Alejandro Santell (@santell) [55e3232] - Sketchfab Store

Please help me out if you have any idea about this…

Thanks in advance.

2

I am not sure to fully get the issue you are facing. Could you create a small repro in the playground with a sphere for instance so we could start looking into it ?

3

Part of the issue is fixed.
but still this can be improved.
here I have created an example and in comments I have written requirement.
https://www.babylonjs-playground.com/#XCPP9Y#5364

Thank you

1 Like
4

When you link a GUI to a mesh with linkWithMesh(), left/top properties won’t work. You can offset the position of the control by setting values to linkOffsetX/ linkOffsetXInPixels / linkOffsetY/ linkOffsetYInPixels.

In your case, you can use:

  • rectangle.adaptWidthToChildren = true and rectangle.adaptHeightToChildren = true; so that the rectangle adapts its size to the text block
  • text1.resizeToFit = true; so that the text block adapts its size to its content

Also, you can use the width/height of the text1 block to update the linkOffsetXInPixels and linkOffsetYInPixels properties to have the top/left corner of the rectangle at the center of the sphere:

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

5

Thank you so much for the help… actually without understanding concept I tried to implement this in my project. After trying hard I found the mistake I was doing.
Finally solved…
Thanks a lot