How to show/hide meshes with dynamically loaded button?

Questions
1

Hi guys,
I am playing around with the show/hide meshes and attempt to load with dynamically-created button.
At first, I look at the reference of this playground: https://playground.babylonjs.com/#LGKV0P#1

I successfully bind the buttons with the meshes but for some reason the setEnabled function is unable to show/hide the mesh.

for (tmp_mesh of mesh_reference)
                        tmp_mesh.setEnabled((tmp_mesh.isEnabled() ? false : true));

if I do tmp_mesh.isEnabled()? true: false, it would show the meshes but can’t hide them if I click it once again.

The playground here :Babylon.js Playground
The playground with setting tmp_mesh.isEnabled()? true:false:Babylon.js Playground

2

Hey there! What an interesting scenario you have going on. :joy:

You have a couple different things going on. Let’s try to walk through them all. Simple answer for your mesh enabled is in the logic.

setEnabled(tmp_mesh.isEnabled()? true: false);
This will return set the enable to true when isEnabled is true and false when isEnabled is false. I don’t think this is the intention.

Instead lets try.
setEnabled(!mesh.isEnabled());

Now for part 2:
Here is a playground I made of what I think is your intention: https://playground.babylonjs.com/#68N544#3
I did a couple of changes from your original design. Let’s take a look. :slight_smile:

First I changed the GUI from HTML to Babylon GUI. I was running into a couple of issues with getting mouse clicks not to work for the HTML so I went with the Babylon GUI to be consistent with Babylon and to isolate the debugging. For this I just made 3 simple buttons in a loop ( lines 30-41).

If you want further information about Babylon GUI, I’d recommend checking out our docs.

Next was the loading mesh. I wasn’t quiet following why you were loading them each button click. So instead I loaded them upfront and store them in an array. (lines 21-27)Then when we click the buttons we set enabled to false on all the meshes except the one of the button we just pressed.

 button.onPointerClickObservable.add( () => {
    for (let j = 0; j < temp; j++) {
    meshes[j].setEnabled(i == j);
}

Hope this wasn’t too hard to follow with all of the changes. Let me know if you have any follow up questions. :slight_smile:

3 Likes
3

Thanks for the answer, I’m just curious if I can dynamically create buttons to show/hide the styles for preview purposes in the future project. I guess it would be better to use BabylonJs GUI for my cases:).

4

Yep of course you can! You can add a button at any time with advancedTexture.addControl(button);