title: Use multiple materials for merged geometries in Three.js
body: <p>I want to create a Pine using 2 meshes, 1 for the trunk and another one for the bush, this what I've done:</p>
  
  <pre><code>var pine_geometry = new THREE.Geometry();
  
  var pine_texture_1 = THREE.ImageUtils.loadTexture('./res/textures/4.jpg');
  var pine_geometry_1 = new THREE.CylinderGeometry(25, 25, 50, 6);
  var pine_material_1 = new THREE.MeshBasicMaterial({
    map : pine_texture_1
  });
  
  var pine_1 = new THREE.Mesh(pine_geometry_1);
  pine_1.position.x = x;
  pine_1.position.y = y + 25;
  pine_1.position.z = z;
  
  pine_1.updateMatrix();
  pine_geometry.merge(pine_1.geometry, pine_1.matrix);
  
  var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
  var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
  var pine_material_2 = new THREE.MeshBasicMaterial({
    map : pine_texture_2
  });
  
  var pine_2 = new THREE.Mesh(pine_geometry_2);
  pine_2.position.x = x;
  pine_2.position.y = y + 175;
  pine_2.position.z = z;
  
  pine_2.updateMatrix();
  pine_geometry.merge(pine_2.geometry, pine_2.matrix);
  
  var pine = new THREE.Mesh(pine_geometry, new THREE.MeshFaceMaterial([pine_material_1, pine_material_2]));
  pine.geometry.computeFaceNormals();
  pine.geometry.computeVertexNormals();
  
  Game.scene.add(pine);
  </code></pre>
  
  <p>The Pine is correctly positioned as I want, however, the whole merged shape only uses 1 material instead of the 2 (the whole shape is covered by the 1st) and I want that each mesh has it's respective material when mergin both.</p>
  
  <p>What I'm doing wrong? any idea?</p>