Show/Hide large numbers of grouped meshes/gui elements on mesh click

Questions
1

Afternoon,

With some great community help I have been progressing a project aimed at providing information about the new Formula 1 regulations.

As the linked playground shows, by clicking on different meshes, they become highlighted and information about them appears and disappears when you click off.

Also you will see that I have started to populate dimensions with the intention that these appear and disappear with the clicks also.

I had intended to put the dimension gui elements into an AssetContainer and then add/remove this from the scene similar to the isVisible command used elsewhere on the code. You can see these efforts on lines 757/758 where the container is made and a few elements pushed to it. Also on lines 910 and 951 where the intended behaviour was added. These later lines are commented out as they don’t work but have been left in to show intent.

Essentially Im looking for a way of grouping a large number of gui elements into a single entity and then turning this single entity on and off with the hotspots.

Any guidance would be appreciated.

Best,
Sy

PS - Apologies for the code which is only partially refactored.

2

@DarraghBurke might have a trick for the GUI

3

Well, if you want to group a large number of GUI elements and show or hide them simultaneously, you can use a Container - an invisible Rectangle could be a good choice.

But if you want a single child to be visible, that won’t work - all the children will be either visible or invisible.

I notice you have this function in your code:

// For hiding GUI elements
let hideAllGuiElements = function() {
    // Hide all GUI elements
    hotspots.forEach((guiElement) => {
        guiElement.guiItem.isVisible = false;
        guiElement.guiItem1.isVisible = false;
        //guiElement.guiItem2.removeAllFromScene();
    });
}

Could you clarify what the issue is with this solution? It seems to work. Is it a performance problem?

1 Like
4

Hello!

Thanks for your comments. Attached PG with the failing code from the snippet above no longer commented out.

As you can see the gui elements pushed to this container remain visible on startup when I expect them to be removed from scene on initialisation. Secondly, clicking on the associated hoptspot makes the entire mesh disappear.

I hadn’t considered using an invisible rectangle as a container. This methodology is notionally what I am using anyway except the container rectangles are visible and part of the UI.

I’ll have a play with this and see if I can get that to work.

Thanks,
Sy

1 Like
5

Hello,

So I think I’ve worked out the problem. The elements I am trying to hide are both mesh elements and gui elements. The asset container won’t take both, likewise using an invisible rectangle as a gui container wont take mesh elements. If I split the mesh elements and gui elements of the dimensions into two groups and put one into an asset container and the other into an invisible rectangle then I get the behavior I’m after.

Unfortunately it’s a bit spaghetti code but Ill try and tidy up.

Once I’ve got a working PG Ill put here just in case anyone needs it for a reference.

Thanks again for putting me towards the right track.

Best,
Sy

2 Likes