title: texture not loading properly in three.js
body: <p>I am trying to test obj loading and texturing with three.js. I have a very simple file to load a small simple obj and texture it a yellow image with stars on it. I placed a cube next to it and the cube works just fine, but when I run the code, the yellow stars are not on my obj, it is just plain yelllow. I have no idea what I am doing wrong. Thanks in advance.</p>
  
  <p><img src="https://i.stack.imgur.com/5eCGA.png" alt="screenshot of the result when I run it"></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My first three.js app&lt;/title&gt;
      &lt;style&gt;
          body { margin: 0; }
          canvas { display: block; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="https://threejs.org/build/three.js"&gt;&lt;/script&gt;
      &lt;script src="http://threejs.org/examples/js/loaders/OBJLoader.js"&gt;&lt;/script&gt;
      &lt;script src="http://threejs.org/examples/js/loaders/MTLLoader.js"&gt;&lt;/script&gt;
      &lt;script src="http://threejs.org/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var container;
          var camera, scene, renderer;
          init();
          animate();
          function init() {
              container = document.createElement( 'div' );
              document.body.appendChild( container );
              camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.01,10);
              camera.position.z = 5;
              scene = new THREE.Scene();
              var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
              scene.add( ambientLight );
              var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
              camera.add( pointLight );
              scene.add( camera );
  
              var textureLoader = new THREE.TextureLoader();
              var map = textureLoader.load('color.png');
              var material = new THREE.MeshPhongMaterial({map: map});
              var loader = new THREE.OBJLoader();
              loader.load( 'lame.obj', function ( obj ) {
                  var box = new THREE.Box3().setFromObject( obj );
                  var center = new THREE.Vector3();
                  box.getCenter( center );
                  obj.position.sub( center );
                  obj.traverse( function ( node ) {
                  if ( node.isMesh ) node.material = material;
                  } );
                  scene.add( obj );
              },
              function ( xhr ) {
                  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
              });
  
              var geometry = new THREE.BoxGeometry();
                      var cube = new THREE.Mesh( geometry, material );
                      scene.add( cube );
                      cube.position.x=3
  
              renderer = new THREE.WebGLRenderer();
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              container.appendChild( renderer.domElement );
              var controls = new THREE.OrbitControls( camera, renderer.domElement );
              window.addEventListener( 'resize', onWindowResize, false );
          }
          function onWindowResize() {
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
          function animate() {
              requestAnimationFrame( animate );
              render();
          }
          function render() {
              renderer.render( scene, camera );
          }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>