title: In three.js does not work material selection through span
body: <p>At first, span worked for me, then I set up materialsLib and initMaterialSelectionMenus from documentation and examples, but now or the span does not work, then the model does not appear.
  Help, please!</p>
  
  <p>UPD
  The problem was in the functions. Apparently they were looped or something like that.</p>
  
  <p>Some of code
  main.html:</p>
  
  <pre><code>&lt;canvas id="c" width="100" height="100" allowtransparency frameborder="no" scrolling="yes"&lt;/canvas&gt;
  &lt;div id="menu"&gt;
    &lt;div&gt;&lt;/div&gt;
          &lt;span&gt;Kar color: &lt;select id="kar-mat"&gt;&lt;/select&gt;&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;span&gt;Prof color: &lt;select id="pro-mat"&gt;&lt;/select&gt;&lt;/span&gt;
  &lt;/div&gt;
      &lt;style&gt;
          #c {width: 100px; height: 100px; display: block;}
          #menu {position: absolute; left: 1em; top: 1em; padding: 1em; background: rgba(0, 0, 0, 0.8); color: white; font-family: monospace;}
      &lt;/style&gt;
      &lt;script type="module" src="./main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>main.js:</p>
  
  <pre><code>var karMatSelect = document.getElementById( 'kar-mat' );
  var proMatSelect = document.getElementById( 'pro-mat' );
  var objParts = {
                  karkass: [],
                  proff: [],
              };
  </code></pre>
  
  <p>...</p>
  
  <pre><code>function loadModel() {
      var LOADER = new GLTFLoader();
      LOADER.crossOrigin = true;
      LOADER.load('1.glb',
      (gltf) =&gt; {
          console.log('loading complete')
          const objbox = gltf.scene;
          SCENE.add(objbox);
          console.log(objbox);
          objParts.karkass.push(objbox.getObjectByName('karkasidver')); //all objects are [Mesh]es
          objParts.proff.push(objbox.getObjectByName( 'profl' ),);
  </code></pre>
  
  <p>...</p>
  
  <pre><code>function initMaterials() {
              materialsLib = {
                  karkaslib: [
                      new THREE.MeshStandardMaterial( {
                          color: 0x154889, metalness: 1, roughness: 0.2, name: '5005'
                      } ),
                     .....
                  proflib: [
                      ......
                      } ),
                  ],
              };
          }
          function initMaterialSelectionMenus() {
              function addOption(name, menu) {
                  var option = document.createElement( 'option' );
                  option.text = name;
                  option.value = name;
                  menu.add(option);
              }
              materialsLib.karkaslib.forEach( function ( material ) {
                  addOption(material.name, karMatSelect);
              } );
              materialsLib.proflib.forEach( function ( material ) {
                  addOption(material.name, proMatSelect);
              } );
  
              karMatSelect.selectedIndex = 2;
              proMatSelect.selectedIndex = 5;
              karMatSelect.addEventListener( 'change', updateMaterials );
              proMatSelect.addEventListener( 'change', updateMaterials );
          }
          function updateMaterials() {
              initMaterials()
              var karkasMat = materialsLib.karkaslib[karMatSelect.selectedIndex];
              var proflMat = materialsLib.karkaslib[proMatSelect.selectedIndex];
              objParts.karkass.forEach(part =&gt; part.material = karkasMat);
              objParts.proff.forEach(part =&gt; part.material = proflMat);
          }
  </code></pre>