Change gltf texture on click in 3d js model

Questions
, , , ,
1

I am trying to change the texture of a gltf model when clicking on it, so far you can only change the texture in random colors, but what I would like is that instead of colors they were images of textures

  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
 </script>
  <style>
  model-viewer {
    width: 800px;
    height: 600px;
    font-variant-position: normal;
    }
    </style>
   <model-viewer id="helmet"  camera-controls touch-action="pan-y"   src="sss.gltf" ar alt="A 3D 
     model of a helmet" background-color="#ffff00" shadow-intensity="0" camera-controls interaction- 
      prompt="0"> </model-viewer>




  <div class="controls">
  <div id="controls" class="dim">
    <label for="src">Chose a Model:</label>
    <select id="src">
    <option value="sss.gltf">Model</option>
    <option value="hexagon2.gltf">Hexagon</option>
    <option value="hexafm.gltf">Hexagona</option>
    <option value="chihuass.gltf">Hexagona</option>
    </select><br>


  </div>

   <div> 
  <p>Colors</p>
  <select id="diffuse">
    <option value="colores/Argento.jpg">Argento</option>
    <option value="colores/Bianco.jpg">Bianco</option>
    <option value="colores/Breccia Azul.jpg">Breccia Azul</option>
    <option value="colores/Breccia Nero.jpg">Breccia Nero</option>
    <option value="colores/Carrara.jpg">Carrara</option>
    <option value="colores/Grigio.jpg">Grigio</option>
    <option value="colores/Montclair.jpg">Montclair</option>
    <option value="colores/Orange.png">Orange</option>
    <option value="colores/Pearl.jpg">Pearl</option>
    <option value="colores/Pecan.jpg">Pecan</option>
    <option value="colores/Royal.jpg">Royal</option>
    <option value="colores/Sable.png">Sable</option>
    <option value="colores/Sedona.jpg">Sedona</option>
   </select>
  </div>
   <div>
  <p>Metallic-roughness</p>
  <select id="metallicRoughness">
    <option value="sss.gltf">Argento</option>
    <option value="hexagon2.gltf">Bianco</option>
    <option value="colores/Orange.png">Breccia Azul</option>
    <option value="colores/Breccia Nero.jpg">Breccia Nero</option>
   </select>
   </div>
   <div>
    <p>Normals</p>
     <select id="normals">
    <option value="colores/Orange.png">Damaged helmet</option>
    <option value="../../shared-assets/models/glTF-Sample- 
     Models/2.0/Lantern/glTF/Lantern_normal.png">Lantern Pole</option>
    <option value="../../shared-assets/models/glTF-Sample- 
   Models/2.0/WaterBottle/glTF/WaterBottle_normal.png">Water Bottle</option>
    </select>
   </div>
   <div>
  <p>Occlusion</p>
  <select id="occlusion">
    <option value="colores/Orange.png">Damaged helmet</option>
    <option value="../../shared-assets/models/glTF-Sample- 
   Models/2.0/WaterBottle/glTF/WaterBottle_occlusionRoughnessMetallic.png">Water 
   Bottle</option>
    </select>
  </div>
  <div>
 
    <select id="emission">
  
    </select>
   </div>
 </div>
</model-viewer>
 <script type="module">


    const modelViewerTexture1 = document.querySelector("model-viewer#helmet");


   modelViewerTexture1.addEventListener("load", () => {

   const createAndApplyTexture = async (event,channel) => {

   const material = modelViewerTexture1.materialFromPoint(event.clientX, event.clientY);
    const texture =  modelViewerTexture1.createTexture(event.target.value);
   if (material != null) {
   //change color
    material.pbrMetallicRoughness.
    setBaseColorFactor([Math.random(), Math.random(), Math.random()]);

    }
  };


  document.querySelector('#src').addEventListener('input', (event) => {
  modelViewerTexture1.src = event.target.value;
 });

        document.querySelector('#normals').addEventListener('input', (event) => {
    createAndApplyTexture('normalTexture', event);
   });

       document.querySelector('#occlusion').addEventListener('input', (event) => {
       createAndApplyTexture('occlusionTexture', event);
       });

       document.querySelector('#emission').addEventListener('input', (event) => {
     createAndApplyTexture('emissiveTexture', event);
       });

       document.querySelector('#diffuse').addEventListener('input', (event) => {
     createAndApplyTexture('baseColorTexture', event);
     });

     document.querySelector('#metallicRoughness').addEventListener('input', (event) => {
   createAndApplyTexture('metallicRoughnessTexture', event);
  });

    modelViewerTexture1.addEventListener("click", createAndApplyTexture);
 });
  s</script>