Update 125x2 example with controls

docs/examples/125_x2.html

@@ -83,7 +83,40 @@
       <button slot="ar-button" class="ar-button">
         View in AR
       </button>
+      <div class="controls" id="layer-controls">
+        <button data-layer="0">Density</button>
+        <button data-layer="1">Momentum</button>
+      </div>
     </model-viewer>
+    <script>
+      function componentToHex(c) {
+        var hex = Math.round(c * 256).toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+      }
+
+      function rgbToHex(r, g, b) {
+        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+      }
+
+      const modelViewer = document.querySelector("model-viewer");
+      modelViewer.addEventListener("load", (_event) => {
+        const colors = modelViewer.model.materials.map(material => material.pbrMetallicRoughness.baseColorFactor);
+        const originalOpacities = colors.map(color => color[3]);
+        const layersOn = colors.map(_ => true);
+
+        const layerControls = document.querySelector("#layer-controls");
+        const hexColors = colors.map(color => rgbToHex(...color.slice(0, 3)));
+        [...layerControls.children].forEach((button, index) => button.style.color = hexColors[index]);
+        layerControls.addEventListener("click", (event) => {
+          const index = Number(event.target.dataset.layer);
+          const material = modelViewer.model.materials[index];
+          const rgb = material.pbrMetallicRoughness.baseColorFactor.slice(0, 3);
+          const wasOn = layersOn[index];
+          material.pbrMetallicRoughness.setBaseColorFactor([...rgb, wasOn ? 0.0 : originalOpacities[index]]);
+          layerControls.children[index].style.color = wasOn ? "black" : hexColors[index];
+          layersOn[index] = !wasOn;
+        });
+      });
+    </script>
   </body>
 </html>
-