Button3D with TextBlock shows text behind behind the button

I have a playerMesh already loaded, and I want to add the rectangle with the player’s name tag on the top. To achieve this, I added a Button3D and TextBlock as its content.

It all works, except for the fact that the text is behind the button. Please take a look at the attached screenshots and see my code snippet.

Apologies in advance for not setting an example in the playground.


    const manager = new GUI.GUI3DManager(this.scene);
    const panel = new GUI.PlanePanel();
    manager.addControl(panel);

    panel.rows = 1;
    panel.columns = 1;

    const button = new GUI.Button3D('button');
    panel.addControl(button);

    panel.position.x = this.playerMesh.position.x;
    panel.position.z = this.playerMesh.position.z;
    panel.position.y = this.playerMesh.position.y + 2.4;

    button.scaling.z = 0.01;
    //
    button.onPointerClickObservable.clear();
    button.pointerEnterAnimation = () => {
    }; // no animation
    button.pointerOutAnimation = () => {
    }; // no animation
    button.pointerUpAnimation = () => {
    }; // no animation
    button.pointerDownAnimation = () => {
    }; // no animation

    const textBlock = new GUI.TextBlock();
    textBlock.text = 'Your Text Here';
    textBlock.color = 'white';
    textBlock.fontSize = 35;

    button.content = textBlock;
    panel.linkToTransformNode(this.playerMesh);

Here’s a repro in the Playground:

The problem is because of the special node we must add to handle right to left handedness conversion.

The easier way to fix it is to set scene.useRightHandedSystem = true; after you created the mesh:

If you can’t do it, you should add a transformation (negating the z scaling does the job):

3 Likes

Thank you so much, negative z scaling did it for me.