GUI Texture Mode | Info Block

Questions
1

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.

Ref:- https://playground.babylonjs.com/#0BJDAT#34

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

Thanks In Advance

2

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.

3

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(
‘Plane_’,
{
size: 2,
},
tscene
);
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(
        'InfoBlock_'
    );
    advancedTexture.addControl(rect2);
    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';
    rect2.linkWithMesh(aircraft);
    
   // 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;
    rect2.addControl(text2);

     var line = new Line(
       'Line_'
     );
    line.lineWidth = 40;
    line.color = 'Orange';
    line.y2 = 0;
    line.linkOffsetY = -20;
    advancedTexture.addControl(line);
    line.linkWithMesh(aircraft);
    line.connectedControl = rect2;
    
    // Unable to position this line so that is joins my mesh(aircraft) and rectangle bottom
    // Just like here:- https://playground.babylonjs.com/#0BJDAT#34
4

Are you able to reproduce the problem in the Playground?

It will be easier to help.

1 Like