title: How to dynamically overlay a texture from a GLTF model - Three.js
body: <p>I want to overlay/switch on&amp;off a texture from a GLTF model, but can't find how or if is it possible. I was able to load it perfectly, but when I try to reload or overlay the texture nothing happens or I get some errors. The last thing I tried don't give me any errors, but the model keeps the original texture. I also tried to unload the model and reload again with other texture, no success either.</p>
  
  <p>I'm using the standard THREE.GLTFLoader example from three.js docs, just changed the 3d loaded model and added a function to do this changes after some time. I'm probabily confusing everything, if you can help I will appreciate, thanks in advance.</p>
  
  <p>Accessed links that does not help me:
  <a href="https://stackoverflow.com/questions/18357529/threejs-remove-object-from-scene">ThreeJS: Remove object from scene</a>;
  <a href="https://stackoverflow.com/questions/23521434/three-js-switching-objects-on-click">three.js Switching objects on click</a>;
  <a href="https://stackoverflow.com/questions/47513018/how-do-i-change-the-texture-of-a-gltf-model-dynamically">How do I change the texture of a GLTF model dynamically?</a>;
  <a href="https://stackoverflow.com/questions/18324936/change-texture-of-loaded-obj-in-three-js-at-runtime">Change texture of loaded .obj in three.js at runtime</a>; <a href="https://stackoverflow.com/questions/52067999/import-another-texture-at-runtime-within-three-js-and-gltf">Import another Texture at runtime within THREE.JS and GLTF</a></p>
  
  <p>Code I'm using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;three.js webgl - glTF loader&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
      &lt;style&gt;
          body {
              font-family: Monospace;
              background-color: #000;
              color: #fff;
              margin: 0px;
              overflow: hidden;
          }
          #info {
              color: #fff;
              position: absolute;
              top: 10px;
              width: 100%;
              text-align: center;
              z-index: 100;
              display:block;
          }
          #info a {
              color: #75ddc1;
              font-weight: bold;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="info"&gt;&lt;!--
          &lt;a href="http://threejs.org" target="_blank" rel="noopener"&gt;three.js&lt;/a&gt; - GLTFLoader&lt;br /&gt;
          Battle Damaged Sci-fi Helmet by
          &lt;a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener"&gt;theblueturtle_&lt;/a&gt;&lt;br /&gt; --&gt;
      &lt;/div&gt;
  
      &lt;script src="build/three.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script src="js/loaders/GLTFLoader.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
          var container, stats, controls;
          var camera, scene, renderer, light;
          var globalObject;
  
          init();
          animate();
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 2000 );
              camera.position.set( -250.8, 260.9, 262.7 );
  
  
              controls = new THREE.OrbitControls( camera );
              controls.target.set( 0, -0.2, -0.2 );
              controls.update();
  
              // envmap
              var path = 'textures/cube/Bridge2/';
              var format = '.jpg';
              var envMap = new THREE.CubeTextureLoader().load( [
                  path + 'posx' + format, path + 'negx' + format,
                  path + 'posy' + format, path + 'negy' + format,
                  path + 'posz' + format, path + 'negz' + format
              ] );
  
              scene = new THREE.Scene();
              scene.background = envMap;
  
              light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
              light.position.set( 0, 1, 0 );
              scene.add( light );
  
              // model
              var loader = new THREE.GLTFLoader();
              loader.load( 'models/testeFinal2-1/testeFinal2-1.gltf', function ( gltf ) {
  
                  globalObject = gltf.scene;
  
                  gltf.scene.traverse( function ( child ) {
  
                      if ( child.isMesh ) {
  
                          child.material.envMap = envMap;
  
                      }
  
                  } );
  
                  scene.add( gltf.scene );
  
              } );
  
              renderer = new THREE.WebGLRenderer( { antialias: true } );
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              renderer.gammaOutput = true;
              container.appendChild( renderer.domElement );
  
              window.addEventListener( 'resize', onWindowResize, false );
  
              // stats
              stats = new Stats();
              container.appendChild( stats.dom );
  
          }
  
          function onWindowResize() {
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          //
  
          function animate() {
  
              requestAnimationFrame( animate );
  
              renderer.render( scene, camera );
  
              stats.update();
  
          }
  
          setTimeout(newTexture(), 7000); //Do the changes after 7s.
  
          function newTexture() {
  
              scene.remove( globalObject ); //This don't give me any error, but does nothing.
  
              // envmap
              var path = 'textures/cube/Bridge2/';
              var format = '.jpg';
              var envMap = new THREE.CubeTextureLoader().load( [
                  path + 'posx' + format, path + 'negx' + format,
                  path + 'posy' + format, path + 'negy' + format,
                  path + 'posz' + format, path + 'negz' + format
              ] );
  
              var loader = new THREE.GLTFLoader(); //Trying to reload the second time, does nothing either.
              loader.load( 'models/testeFinal2-1/2/testeFinal2-1.gltf', function ( gltf ) {
  
                  gltf.scene.traverse( function ( child ) {
  
                      if ( child.isMesh ) {
  
                          child.material.envMap = envMap;
  
                      }
  
                  } );
  
                  scene.add( gltf.scene );
  
              } );
          }           
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>UPDATE1 (removed the newTexture function and edited the model's loader):</p>
  
  <pre><code>// model
              var loader = new THREE.GLTFLoader();
              loader.load( 'models/testeFinal2-1/testeFinal2-1.gltf', function ( gltf ) {
  
                  globalObject = gltf.scene;
  
                  gltf.scene.traverse( function ( child ) {
  
                      if ( child.isMesh ) {
  
                          child.material.envMap = envMap;
  
                          setTimeout(function () {
                              child.material.map.image.currentSrc = "/models/testeFinal2-1/2/finalTest2_ORTO2.jpg";
                              child.material.map.image.src = "/models/testeFinal2-1/2/finalTest2_ORTO2.jpg";
                          }, 5000);
  
                      }
  
                  } );
  
                  scene.add( gltf.scene );
  
              } );
  </code></pre>