How to scale TextBlock distanse to the model?

Hi everyone!

We are building an interactive diagram of railway tracks. It is necessary to display the car number above the model of each car. I am using BABYLON.GUI.TextBlock for this. I am using BABYLON.ArcRotateCamera to control the scene.

Link to example below

https://playground.babylonjs.com/#FJ44XF#4

When the camera zoom in or out of the scene, the distance from the model to the TextBlock remains constant, but I want it to decrease or increase proportionally as well.

This should look like the unit’s health bar in real time strategy. It would also be nice if the text itself was scaled the same way.

Please tell me how I can achieve this. Thanks in advance for any help

Welcome aboard!

You should probably use a billboard plane instead. Something like in this thread:

Make it a child of the mesh so that it follows when moved.

If you really want to use the GUI, you will need to change the font size manually, depending on the distance between the camera and the mesh.

1 Like