Show/hide components like in this example

[Doktorkos]

Hello friends,

Im planning to create a web application like this here:

https://angle-3d-demo.myshopify.com/collections/frontpage/products/dji-phantom-custom-pricing

how is this done with the option to hide/show components ? Can anyone help out here ? The plan is to integrate this not only to Shopify. It should be possible to integrate this to a separate
Website.

thanks 🙏

[elalish]

Wow, that is a very nice model-viewer example, thank you for that! Normally I would say we don't support hide/show and that to get the camera option to show up you'd change the src and download a different version of the model. However, this example does not appear to do that or take the associated performance hit. It appears they are doing all of their variant changes by changing material properties with our scene-graph API. I would bet they are hiding their camera simply by setting its baseColorFactor to [1, 1, 1, 0] to make it completely transparent, and probably setting alphaBlendMode to MASK.

This is a very good idea, and I think I'll build an example to demonstrate this technique, since more people should be using it.

[elalish]

In fact I did point you to an example 😁. I'll make a better one, but that does have all the basics you need. However, you'll first need to ensure that the objects you want to independently hide or otherwise change have separate glTF materials.

[Doktorkos]

It would be really great if the example would hide for example a part (mesh) of the model :) thank you!

[ronpadz]

Note that this would likely satisfy some of the use cases for this perennially revisited issue: #482

[Cebolitoss]

Hi, so I understood the concept of "setting its baseColorFactor to [1, 1, 1, 0] to make it completely transparent" and probably setting alphaBlendMode to MASK."

But how do I do that exactly? Here is my doubt:
Do I need to create this material using codes or can I use my material previously created (the materials that come already in the .glb)?
And how do I access this materials that I created previously?

There is another thing that confuses me, because: My model has multiple material variants. So how do I change this "baseColorFactor" for each one of the variants of the materials ? Is here the best place to ask doubts as these ones ? Or should I be asking somewhere else?

Thanks in advance!

[aiswaryapramod]

@Doktorkos Could you please provide the GitHub repository for this project:
https://angle-3d-demo.myshopify.com/collections/frontpage/products/dji-phantom-custom-pricing