title: Three.js multiple materials on object loaded via OBJMTLLoader
body: <p>I have ".obj" and ".mtl" files of a model and I'm loading it via <code>OBJMTLLoader</code>. ".mtl" specifies texture to apply to a model, and three.js loads model and renders it with applied texture just fine.</p>
  
  <p>But here's the thing.</p>
  
  <p>Once an object is loaded, I would like to apply another texture onto it. This is because first texture represents surface material of an object. And second texture is a drawing, that I'd like to position at a specific location on a model.</p>
  
  <p>My question is: <strong>how to apply a second texture onto already loaded (and texturized) object</strong>?</p>
  
  <p>I see that three.js creates an instance of <code>THREE.Object3D</code>, and that instance has "children" array with one instance of <code>THREE.Mesh</code>.</p>
  
  <p>When I try to apply a texture to that mesh (<code>mesh.material.map = texture</code>), I lose initial texture.</p>
  
  <p>I looked into this <a href="https://stackoverflow.com/questions/14932329/multiple-materials-with-jsonloader">question about applying multiple textures and JSONLoader</a> but didn't find an answer.</p>
  
  <p>I also tried using <code>new THREE.MeshFaceMaterial( materials )</code> (as suggested in <a href="https://stackoverflow.com/a/12439857/130652">this answer</a>) but unsuccessfully.</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I tried @WestLangley's suggestion to use multi-material object, but am still unable to render one material on top of another one.</p>
  
  <p>I made this simple demo, adapted from three.js OBJLoader — <a href="http://dl.dropboxusercontent.com/u/822184/webgl_multiple_texture/index.html" rel="nofollow noreferrer">http://dl.dropboxusercontent.com/u/822184/webgl_multiple_texture/index.html</a></p>
  
  <p>I'm using <code>THREE.SceneUtils.createMultiMaterialObject</code> as suggested, passing it cloned geometry of main mesh loaded from .obj. I'm also giving it 2 textures — one for entire surface, another one — for front surface of the model.</p>
  
  <p>But this doesn't work. I added 2 checkboxes that toggle "visible" property of corresponding materials. You can see that materials are present, but I can't see the first one from beneath second one.</p>
  
  <p>The crux of the loading/rendering is as follows:</p>
  
  <pre><code>var texture = THREE.ImageUtils.loadTexture('fabric.jpg');
  var texture2 = THREE.ImageUtils.loadTexture('table.jpg');
  
  texture2.offset.set(-0.65, -2.5);
  texture2.repeat.set(4, 4);
  
  var loader = new THREE.OBJLoader();
  loader.addEventListener( 'load', function ( event ) {
  
    var mainMesh = event.content.children[0].children[0];
  
    multiMaterialObject = THREE.SceneUtils.createMultiMaterialObject( 
      mainMesh.geometry.clone(), [
        new THREE.MeshLambertMaterial({ map: texture2 }),
        new THREE.MeshLambertMaterial({ map: texture })
      ]);
  
    multiMaterialObject.position.y = -80;
    scene.add(multiMaterialObject);
  });
  
  loader.load( 'male02.obj' );
  </code></pre>
  
  <p><strong>UPDATE #2</strong></p>
  
  <p>At this point, I think the best bet is to use <code>THREE.ShaderMaterial</code> to apply one texture onto another. I see some <a href="https://stackoverflow.com/questions/12627422/custom-texture-shader-in-three-js">examples of using one texture</a> but still unsure how to display both in overlaid state. I'm also not sure how to position texture at a specific location on a mesh.</p>