title: How to override GLTF materials in three.js
body: <p>I am trying to create a dynamic way to display solar data on a gltf imported model in three.js. The aim would be to associate different solid colours to different segments of the model and be able to switch these off and on. My current hurdle is changing the colour of the material in gltf.</p>
  
  <p>I have tried using an ObjLoader instead so that I can input my own material, but this didn't work :/ </p>
  
  <p>Here is the js I have currently:</p>
  
  <pre><code>        const gltfLoader = new THREE.GLTFLoader();
          gltfLoader.load('Building.glb', (gltf) =&gt; {
              const root = gltf.scene;
              scene.add(root);
  
              const box = new THREE.Box3().setFromObject(root);
              const boxSize = box.getSize(new THREE.Vector3()).length();
              const boxCenter = box.getCenter(new THREE.Vector3());
  
              frameArea(boxSize * 0.5, boxSize, boxCenter, camera);
  
              controls.maxDistance = boxSize * 10;
              controls.target.copy(boxCenter);
              controls.update();
            });
  
  
      function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
          const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
          const halfFovY = THREE.Math.degToRad(camera.fov * .5);
          const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
          const direction = (new THREE.Vector3())
          .subVectors(camera.position, boxCenter)
          .multiply(new THREE.Vector3(1, 0, 1))
          .normalize();
  
          camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
  
          camera.near = boxSize / 100;
          camera.far = boxSize * 100;
  
          camera.updateProjectionMatrix();
  
          // point the camera to look at the center of the box
          camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
      }
  
      renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true});
      renderer.setClearColor(0x000000);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild( renderer.domElement );
  
  
  
      function resizeRendererToDisplaySize(renderer) {
          const canvas = renderer.domElement;
          const width = canvas.clientWidth;
          const height = canvas.clientHeight;
          const needResize = canvas.width !== width || canvas.height !== height;
          if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
      }
  
      function render() {
          if (resizeRendererToDisplaySize(renderer)) {
              const canvas = renderer.domElement;
              camera.aspect = canvas.clientWidth / canvas.clientHeight;
               camera.updateProjectionMatrix();
              }
              renderer.render(scene, camera);
              requestAnimationFrame(render);
           }
           requestAnimationFrame(render);
  </code></pre>