Load multiple glTF, then hide/show - Product Configurator

Hey, I’m José and I am trying to create a simple product configurator. My goal is to load multiple glTF files and instantly hide all of them except one. Then have buttons that show one object and hide all the others. You get the idea.
So far i was able to load multiple glTF, but i cant figure out how to instanly hide all of them exept one. And then show/hide the rest with simple buttons.
I’m very new to WebGL.
I’ll leave a link to my PG.



1 Like

Hi and welcome!

On your success callback you can set the gltf root node (the first mesh loaded) to enabled = false:


After everything is done, you can then set one of them enabled

Thanks. But now how do i acces each file by ID or Name?

I would do something like this - https://playground.babylonjs.com/#LGZ4VG#6

Keep a track of the finished tasks, enable or disable according to the index. This is a very simple approach (i tried using jquery, coz I saw you were using it initially, but I would recommend you using our native GUI)

Thank you very much for your time!!
Clearly I was looking in the wrong direction.
I hate to ask so many things, but how would you keep just one mesh Enabled as soon as you load all the assets, without pressing any buttons?

Just check the index you want to keep and don’t set it to false.

There are many ways to achieve any of these tasks, this is just one of them (one i happen to like at the moment. this changes once every 2 days or so :wink: ). You just need to structure the data in a way that is comfortable for you. Using TypeScript might be good here, especially with the available params and variables on tasks etc’.

Thats the problem I have. There are so many ways to achieve the same result. I dont know where to begin. Can you give me an insight on where to start?
I know how to do basic things, but i struggle to connect them.
Again, thank you very much!!

That’s a very broad question about data structures :slight_smile:

Organize the code as you see fit, try to use what you have instead of recreation things, and use the framework’s native functions as much as you can, before creating your own version of it.

This is very broad, but there is no way to answer is in a more detailed way.

Start with out documentation page - doc.babylonjs.com . It has many code samples, getting started guide, and easy-to-use guides to get you started

1 Like

Yes I think that was the problem, using another persons Code instead of mine. I’ll start from there. Thank you!

Hey. I’m sorry to bother you again. I’ve been experimenting with the doc and trying to use Babylon GUI as you said. The only thing i have left to make it work is the buttons. I would appreciate very much if you can help me with this, I think its the last thing I need. Thanks!