Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device=width, initial-scale=1.0">
  <title>Founder Series</title>
  <script type="module" src="https://unpkg.com/@google/[email protected]/dist/model-viewer.min.js"></script><!---->

  <style>
    model-viewer{
      width: 90%;
      height: 512px;
      margin: 0 auto;
      padding: 10;
    }
  </style>
</head>
<body>
  <select class="controls" ,="" id="color-controls" onchange="updateCol();" >
    <option value="https://01000001khan.github.io/AR-Speakers/assets/textures/founder/blackWalnut.jpg">Black Walnut</option>
    <option value="https://01000001khan.github.io/AR-Speakers/assets/textures/founder/darkCherry.jpg">Dark Cherry</option>
    <option value="https://01000001khan.github.io/AR-Speakers/assets/textures/founder/walnut.jpg" selected="selected">Walnut</option>
    <option value="https://01000001khan.github.io/AR-Speakers/assets/textures/founder/pianoBlack.jpg">Piano Black</option>
    <option value="https://01000001khan.github.io/AR-Speakers/assets/textures/UV.jpg">Non-existent Testing Material</option>
  </select>


  <p>Founder 120H</p>
  <model-viewer id="speaker" ar ar-modes="webxr scene-viewer quick-look" camera-controls auto-rotate src="https://01000001khan.github.io/AR-Speakers/assets/models/founder/founder120h.glb" onload="updateCol();">
    <button slot="ar-button" style="background-color: white; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">View in AR</button>
  </model-viewer>
  <br>


  <script>

    //called on change in colour selection list
    function updateCol(){

      let speakers = document.querySelectorAll("#speaker")

      speakers.forEach(function(speaker){
        const material = speaker.model.materials[0];


        //Get current text value (name) of selected option
        var e = document.getElementById("color-controls");
        var finishName = e.options[e.selectedIndex].text;

        material.pbrMetallicRoughness['baseColorTexture'].texture.source.setURI(e.value);

        if (finishName === "Black Walnut"){
          material.pbrMetallicRoughness.setRoughnessFactor(0.8);
          material.pbrMetallicRoughness.setMetallicFactor(1.0);
        }
        else if (finishName === "Dark Cherry"){
          material.pbrMetallicRoughness.setRoughnessFactor(0.0);
          material.pbrMetallicRoughness.setMetallicFactor(0.0);
        }
        else if (finishName === "Walnut")
        {
          material.pbrMetallicRoughness.setRoughnessFactor(0.8);
          material.pbrMetallicRoughness.setMetallicFactor(0.1);
        }
        else if (finishName === "Piano Black")
        {
          material.pbrMetallicRoughness.setRoughnessFactor(0.0);
          material.pbrMetallicRoughness.setMetallicFactor(1.0);
        }
        else if (finishName === "Non-existent Testing Material")
        {
          material.pbrMetallicRoughness.setRoughnessFactor(0.5);
          material.pbrMetallicRoughness.setMetallicFactor(1.0);
        }
      });
    }

  </script>

</body>
</html>