title: how to merge two different geometry and different material merge into one in three.js?
body: <p>I draw one <code>square 2D line diagram</code> than square diagram into another <code>sample image</code> put in center position. but one is visible another hide. I used two different geometry, material. <code>one is line base material set a color</code>,<code>second image material</code>. I did marge but not properly. please, anyone, give the idea or what mistake in my code?</p>
  
  <pre><code> var combined = new THREE.Geometry(); 
  
  var squareGeometry = new THREE.Geometry();
  squareGeometry.vertices.push(
              new THREE.Vector3(startX, startY, 0),
              new THREE.Vector3(endX, startY, 0),
              new THREE.Vector3(endX, endY, 0),
              new THREE.Vector3(startX, endY, 0),
              new THREE.Vector3(startX, startY, 0)
  );
  var squareMaterial = new THREE.LineBasicMaterial({color: color});
  var square = new THREE.Line(squareGeometry, squareMaterial);
  
  var iconGeometry = new THREE.PlaneGeometry(objSize.width/2, objSize.height/2);
  var iconMaterial = new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('images/plantIcon.png')
  });
  var icon = new THREE.Mesh(iconGeometry,iconMaterial);
  
  
  //      square.holes.push( icon);
  //      THREE.GeometryUtils.merge(square, icon);
  
  combined.merge(square.geometry, square.matrix);
  combined.merge(icon.geometry, icon.matrix);
  
  var merge = new THREE.Mesh(combined,new THREE.MeshBasicMaterial({
  map:THREE.ImageUtils.loadTexture('images/plantIcon.png'),//color: color
  }));
  
  merge.position.x = objPosition.x;
  merge.position.y = objPosition.z;
  
  scene.add(merge);
  </code></pre>