GUI Texture Mode | Info Block

I am trying to create a info block for my moving mesh with GUI texture mode(Not full screen UI).

I want to create a rectangle which have some text info and a line which is joining my moving mesh with rectangle.


Unable to create this in texture mode. Facing challenges in position the line to join rectangle and my moving mesh.

Thanks In Advance

If you don’t want to use the full-screen GUI mode, I think you’ll have to manage the labels yourself, by creating a plan parented to your mesh (so that it moves with your mesh) and setting the display mode to “All”, for example.

Thanks for your response. I am approaching it same manner but unable to position line to join plan(rectangle) and my mesh. So that I can display that the info block correspond to the mesh.

Here is my code:-
// GUI
var plane = CreatePlane(
size: 2,
plane.parent = aircraft; // aircraft is my mesh
plane.position.y = 10;
plane.scaling = new BABYLON.Vector3(6, 3, 1);
plane.edgesColor = new BABYLON.Color4(0, 0, 1);
plane.renderingGroupId = 1;
plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL; //Rotate with camera

    var advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane);

    let rect2 = new Rectangle(
    rect2.width = '100%';
    rect2.height = '100%';
    rect2.thickness = 30;
    rect2.color = '#87F1F2FF';
    //rect2.linkOffsetY = '-25px';
    rect2.transformCenterY = 1;
    rect2.background = 'black';
    rect2.cornerRadius = 5;
    rect2.hoverCursor = 'pointer';
   // Able to position this rectangle with mesh and it is moving as well

    let text2 = new TextBlock(
        'TextBlock_' + aircraft?.metadata?.flightData?.flight_id
    text2.text = aircraft?.metadata?.flightData?.flight_id;
    text2.color = '#87F1F2FF';
    text2.fontSize = 200;
    text2.fontWeight = 'bold';
    text2.textWrapping = true;
    text2.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;

     var line = new Line(
    line.lineWidth = 40;
    line.color = 'Orange';
    line.y2 = 0;
    line.linkOffsetY = -20;
    line.connectedControl = rect2;
    // Unable to position this line so that is joins my mesh(aircraft) and rectangle bottom
    // Just like here:-

Are you able to reproduce the problem in the Playground?

It will be easier to help.

1 Like