title: Apply MeshBasicMaterial to loaded obj+mtl with Three.js
body: <p>When I load obj+mtl+jpg data with Three.js, the material of the object is set to MeshLambertMaterial according to three.js document. If I want to change the material to another one such as MeshBasicMaterial, how can I do that? </p>
  
  <p>The following code loads obj+mtl+jpg from my server and display the data with MeshLambertMaterial. I tried to apply MeshBasicMaterial with the following code (commented), but it failed and the object with displayed in white.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="ja"&gt;
  &lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;/head&gt;
  &lt;script src="http://threejs.org/build/three.min.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/loaders/OBJMTLLoader.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div id="canvas_frame"&gt;&lt;/div&gt;
      &lt;script&gt;
      var canvasFrame, scene, renderer, camera;
      canvasFrame = document.getElementById('canvas_frame');
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      canvasFrame.appendChild( renderer.domElement );
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
      camera.position.set(50,50,50);
      camera.lookAt( {x: 0, y: 0, z: 0} );
      var ambient = new THREE.AmbientLight(0xFFFFFF);
      scene.add(ambient);
  
      function animate() {
          renderer.render( scene, camera );
          requestAnimationFrame( animate );
      }
  
      function loadObjMtl(objUrl, mtlUrl, url, x, y, z){
            var loader = new THREE.OBJMTLLoader();
            loader.crossOrigin = 'anonymous';
            loader.load( objUrl, mtlUrl,
                function ( object ) {
                  object.url = url; 
                  object.position.set(x,y,z);
  
              object.traverse( function( node ) {
                  if( node.material ) {
                      ////This doesn't work. How can I apply material for loaded obj?
                      //var material = new THREE.MeshBasicMaterial();
                      //if ( node instanceof THREE.Mesh ) {
                      //    node.material = material;
                      //}
                  }
              });
  
  
  
  
  
                  scene.add ( object ); 
              });
      }
  
      objUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.obj";
      mtlUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.mtl";
      loadObjMtl(objUrl,mtlUrl,"",0,0,0);
  
      animate(); 
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>