title: three.js: Apply external texture to glTF
body: <p>I have two files: &quot;model.gltf&quot; and &quot;texture.jpeg&quot;. I want to apply texture file to model and render it using three.js but after 3 days of continuous research and hundreds of attempts, I just can't get it to work properly. My method that sets the current object in the scene:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * SET method: Sets object in the scene (deleting previous one)
   * 
   * @author Anton Pernisch &lt;anton@pernisch.dev&gt;
   * @param {string} modelPath - Path to object in glTF format
   * @param {string} texturePath - Path to texture
   * @returns {boolean}
   * 
   * @todo Texture
   */
  SET_Object: function(modelPath, texturePath) {
      // Clear out the scene
      for (var i = this.prodconf3_scene.children.length - 1; i &gt;= 0; i--) { 
          obj = this.prodconf3_scene.children[i];
          this.prodconf3_scene.remove(obj); 
      }
  
      const modelLoader = new THREE.GLTFLoader();
  
      modelLoader.load(modelPath, (gltf) =&gt; {
          // HERE? apply texture from texturePath to this gltf
  
          this.prodconf3_obj = gltf.scene;
          this.prodconf3_scene.add(this.prodconf3_obj);
      });
      
      return true;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This code imports glTF just fine, it's just black. Eventually, I was able to apply .jpeg texture to this model, but only sort of. This is the best result I could get:
  <a href="https://i.stack.imgur.com/ICjQt.png" rel="nofollow noreferrer">here</a></p>
  <p>And that was by this method:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * SET method: Sets current object to scene (deleting previous one)
   * 
   * @author Anton Pernisch &lt;anton@pernisch.dev&gt;
   * @param {string} modelPath - Path to object in glTF format
   * @param {string} texturePath - Path to texture
   * @returns {boolean}
   * 
   * @todo Texture
   */
  SET_Object: function(modelPath, texturePath) {
      // Clear out the scene
      for (var i = this.prodconf3_scene.children.length - 1; i &gt;=0 ; i--) { 
          obj = this.prodconf3_scene.children[i];
          this.prodconf3_scene.remove(obj); 
      }
  
      const modelLoader = new THREE.GLTFLoader();
      const textureLoader = new THREE.TextureLoader();
  
      modelLoader.load(modelPath, (gltf) =&gt; {
          var model = gltf.scene;
          model.traverse((o) =&gt; {
              if (o.isMesh) {
                  o.material = new THREE.MeshBasicMaterial({map: textureLoader.load(texturePath)});
              }
          });
  
          this.prodconf3_obj = model;
          this.prodconf3_scene.add(this.prodconf3_obj);
      });
      
      return true;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I have also tried creating texture by TextureLoader load method and then meshing it together with <code>gltf.scene</code> from <code>modelLoader.load</code> function. That didn't work at all, I was getting</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'center' of undefined</p>
  </blockquote>
  <p>error (I'm not sure about using <code>gltf.scene</code> as the first argument in <code>THREE.Mesh()</code> tho).</p>
  <p><strong>So, my question is, what is the proper and updated approach to properly apply the texture to glTF in three.js?</strong></p>