Moving Rectangle up cut his content

Questions
1

Hello everyone,

I just come into a project with BabylonJS and I don’t understand how everything works and if it’s done in the good way or not.
My question is : Is it possible to move up a Rectangle with some text inside without cut his content ?

Without moving the rectangle up : actuel
When moving the rectangle up : actuel_with_top

I have this code :

this.advancedTexture[i] = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(this.hotspotGUI[i]);

this.rect[i] = new BABYLON.GUI.Rectangle();
this.rect[i].cornerRadius = 90;
this.rect[i].thickness = 2;
this.rect[i].background = "#6D2077";
this.rect[i].top = "-400px"; // THIS LINE MOVES UP THE RECTANGLE
this.advancedTexture[i].addControl(this.rect[i]);

this.label[i] = new BABYLON.GUI.TextBlock();
this.label[i].text = formatString(data.Story.scenes[this.id].hotspot[i].name);
this.label[i].fontSize = "110";
this.label[i].color = "white";
this.label[i].textWrapping = true;
this.rect[i].addControl(this.label[i]);

this.label[i].onLinesReadyObservable.addOnce(() => {
    var expectedHeight = this.label[i].computeExpectedHeight();
    this.rect[i].height = expectedHeight + 'px';
    this.label[i].height = expectedHeight + 'px';
});

Thanks,
Best regards,

2

I’m not sure I have fully understood your question but you should move your mesh instead (this.hotspotGUI[i])), as you are applying your GUI texture to a mesh.

3

Hello,

Thanks for your answer but I’m not sure how to do this.
If you want, this is the function where I need to fix this issue.
This is how the point is created.

addImage(i) {
    this.hotspotGUI[i] = new BABYLON.Mesh.CreatePlane("hyperlinkGui", data.Story.scenes[this.id].hotspot[i].geometry.options.size, this.scene);
    this.hotspot[i] = new BABYLON.Mesh.CreateDisc("Hyperlink", data.Story.scenes[this.id].hotspot[i].geometry.options.radius, 60, this.scene, false, BABYLON.Mesh.DOUBLESIDE)

    this.hotspot[i].position = new BABYLON.Vector3(data.Story.scenes[this.id].hotspot[i].transform.position.x, data.Story.scenes[this.id].hotspot[i].transform.position.y, data.Story.scenes[this.id].hotspot[i].transform.position.z)
    this.hotspotGUI[i].position = this.hotspot[i].position.add(this.hotspot[i].position.subtract(camera.position).normalize().scale(0.5));

    this.matImage[i] = new BABYLON.StandardMaterial(this.scene);
    this.matImage[i].diffuseTexture = new BABYLON.Texture(data.Story.scenes[this.id].hotspot[i].event.url, this.scene, true, false);
    this.matImage[i].diffuseTexture.hasAlpha = true;
    this.matImage[i].backFaceCulling = false;
    this.hotspot[i].material = this.matImage[i];

    this.matImageDisplay[i] = new BABYLON.StandardMaterial(this.scene);
    this.matImageDisplay[i].diffuseTexture = new BABYLON.Texture(data.Story.scenes[this.id].hotspot[i].event.url, this.scene, true, true);
    this.matImageDisplay[i].diffuseTexture.hasAlpha = true;
    this.matImageDisplay[i].backFaceCulling = false;

    this.plan[i] = new BABYLON.Mesh.CreatePlane("Image", 4);
    this.plan[i].parent = this.hotspot[i];

    var scaleImageVideo = data.Story.scenes[this.id].hotspot[i].scaleImageVideo;
    if (scaleImageVideo === null) {
        scaleImageVideo = 1;
    } else {
        scaleImageVideo = parseFloat(scaleImageVideo);
    }
    this.plan[i].position = new BABYLON.Vector3(0, scaleImageVideo * 2.5, 0)
    this.plan[i].scaling.x = scaleImageVideo * (1920 / 1080);
    this.plan[i].scaling.y = scaleImageVideo;

    this.plan[i].material = this.matImageDisplay[i];
    this.plan[i].isVisible = false;

    // Close button when we open the image
    this.close[i] = new BABYLON.Mesh.CreatePlane("closeVideo", 2, this.scene);
    this.close[i].parent = this.hotspot[i];
    this.close[i].isVisible = false;
    this.close[i].scaling.x = 0.6;
    this.close[i].scaling.y = 0.6;
    this.close[i].material = this.matClose;
    this.advancedTexture[i] = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(this.hotspotGUI[i]);

    // Title of image in Rectangle which is only visible when mouse on the image
    this.rect[i] = new BABYLON.GUI.Rectangle();
    this.rect[i].cornerRadius = 90;
    this.rect[i].thickness = 2;
    this.rect[i].background = "#6D2077";
    this.rect[i].top = "-400px";
    this.rect[i].isVisible = false;
    this.advancedTexture[i].addControl(this.rect[i]);

    // Text inside the Rectangle
    this.label[i] = new BABYLON.GUI.TextBlock();
    this.label[i].text = formatString(data.Story.scenes[this.id].hotspot[i].name);
    this.label[i].fontSize = "110";
    this.label[i].color = "white";
    this.label[i].textWrapping = true;
    this.label[i].horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    this.label[i].verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    this.label[i].textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    this.label[i].textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    this.rect[i].addControl(this.label[i]);

    this.label[i].onLinesReadyObservable.addOnce(() => {
        var expectedHeight = this.label[i].computeExpectedHeight();
        this.rect[i].height = expectedHeight + 'px';
        this.label[i].height = expectedHeight + 'px';
    });
}

Thanks,

4

You should create a repro in https://playground.babylonjs.com/ so that we can try to help more.

5

Kinda looks like it’s the plane mesh (which the gui is attached to) that is being clipped by another mesh in the scene.