Hide/Show multiple mesh object in the single glb

[Arumugamhns]

I need to hide / show the mesh inside the single .glb
Upvc_Casement_Window_French_Out.glb this is the main file. inside this main file i have two mesh object

1. Upvc_Casement_Window_French_Out_crank_handle2
2. Upvc_Casement_Window_French_Out_Casement_handle3
   How to hide/show these meshes on click the button

[danilokrulj]

This is probably not the way its supposed to be done (sry Emmet), but I do it like this and it gets the job done :) hope it helps

const mv = document.querySelector("model-viewer");
const sceneSym = Object.getOwnPropertySymbols(mv).find(x => x.description === "scene");
modelViewer[sceneSym].children[0].getObjectByName('PART_NAME').visible = false;

You should obviously change "PART_NAME" into the name of the part you want to hide.

[elalish]

Yeah, there be dragons outside of our public API. The right way is here, though I still need to make a proper example.

[kfarr]

We also have this same need. We'd like to use model-viewer to show individual parts of a parent gltf that contains many individual parts for a model directory. These glbs are used already in an A-Frame application and we filter part names from the parent glb using this component https://github.com/supermedium/superframe/tree/master/components/gltf-part

Here's an example glitch of model-viewer where I tried the above using a model from an application. The box-truck node still displays even though I attempt to replace PART_NAME with that value. It works but is clunky, see code in reply below. Here's the working glitch link:
https://glitch.com/edit/#!/planet-jelly-hubcap?path=index.html%3A57%3A0

[kfarr]

Ok I got it to work but it's super clunky. Is there a better way? Also the model shows all the combined parts until the poster is dismissed :(

      const mv = document.querySelector("model-viewer");

      mv.addEventListener(
        "model-visibility",
        () => {
          const sceneSym = Object.getOwnPropertySymbols(mv).find(
            (x) => x.description === "scene"
          );

          var arrayOfObjectNames = [];
          mv[sceneSym].children[0].traverse(function (child) {
            arrayOfObjectNames.push(child.name);
          });

          const forbiddenStrings = ["Scene", "Target"];

          arrayOfObjectNames.forEach((obj) => {
            if (!forbiddenStrings.includes(obj)) {
              if (!/_[0-9]+$/.test(obj)) {
                // if the part name is not forbidden string or ending in underscore and number
                mv[sceneSym].children[0].getObjectByName(obj).visible = false;
              }
            }
          });

          mv[sceneSym].children[0].getObjectByName("city-bus").visible = true;
        },
        { once: true }
      );

[79pxls]

For anyone wanting to see this cool script in action just change "city-bus" to "box-truck" on line 111 of the glitch.
Thank you for posting this @kfarr

[papipsycho]

is work like a charm, but is still display the shadow,

i've try to set to false castShadow and receiveShadow, but nothing seems work, how did you manage this guys ?