Added example to toggle between mesh variants (#4528)

* Added example to toggle between mesh variants

* Fixed the alt

* Addressed some of the comments including changing updateAlpha and making options declerative

* simplify code and address all comments

packages/modelviewer.dev/data/examples.json

@@ -255,6 +255,10 @@
         "htmlId": "transformTexturesExample",
         "name": "Transform Textures"
       },
+      {
+        "htmlId": "hideShowMeshVariantsExample",
+        "name": "Hide/Show Mesh Variants"
+      },
       {
         "htmlId": "animatedTexturesExample",
         "name": "Animated Textures"

packages/modelviewer.dev/examples/scenegraph/index.html

@@ -560,6 +560,70 @@ <h2 class="demo-title">Transform textures</h2>
     </div>
 
 
+    <div class="sample">
+      <div id="hideShowMeshVariantsExample" class="demo"></div>
+      <div class="content">
+        <div class="wrapper">
+          <div class="heading">
+            <h2 class="demo-title">Toggle between Mesh Variants</h2>
+            <p>If you have a few mesh variants, you can hide and show them by changing textures opacity.</p>
+          </div>
+          <example-snippet stamp-to="hideShowMeshVariantsExample" highlight-as="html">
+            <template>
+<model-viewer id="manifold" camera-controls touch-action="pan-y" src="../../shared-assets/models/manifold.glb" ar alt="A 3D model of a stick and ball">
+  <div class="controls">
+    <div>Mesh Variants:
+      <select id="textures">
+        <option value="ball">ball</option>
+        <option value="stick">stick</option>
+      </select>
+    </div>
+</model-viewer>
+<script type="module">
+  const mvTextures = document.querySelector("model-viewer#manifold");
+  const textures = document.querySelector("#textures");
+
+  mvTextures.addEventListener("load", () => {
+    function updateAlphaValue(texture, alpha) {
+      const pbr = texture.pbrMetallicRoughness;
+      const baseColor = pbr.baseColorFactor;
+      baseColor[3] = alpha;
+      pbr.setBaseColorFactor(baseColor);
+    }
+
+    textures.addEventListener("input", (event) => {
+      const selectedValue = event.target.value;
+      const ball = mvTextures.model.getMaterialByName("ball");
+      ball.setAlphaMode("BLEND");
+      const stick = mvTextures.model.getMaterialByName("stick");
+
+      const animationDuration = 1000; // 1 second
+      const startTimestamp = performance.now();
+      function animate(currentTimestamp) {
+        const elapsed = currentTimestamp - startTimestamp;
+
+        const delta = elapsed / animationDuration;
+        const alpha = selectedValue === "ball" ? 1 - delta : delta;
+        updateAlphaValue(stick, alpha);
+        updateAlphaValue(ball, 1 - alpha);
+
+        if (elapsed < animationDuration) {
+          requestAnimationFrame(animate);
+        }
+      }
+
+      requestAnimationFrame(animate);
+    });
+  });
+</script>
+            </template>
+          </example-snippet>
+        </div>
+      </div>
+    </div>
+
+
+
     <div class="sample">
       <div id="animatedTexturesExample" class="demo"></div>
       <div class="content">