title: How to two geometries or meshes are merge in three.js?
body: <p>I using 2 geometry, one is line based square 2D geometry, the second is icon image. I expect Should center and place the icons inside the 2d rectangle drawn region area. Below 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 square = new THREE.Line(squareGeometry, new THREE.LineBasicMaterial({
              color: color
          }));
  
          var iconGeometry = new THREE.PlaneGeometry(objSize.width, objSize.height);
          var iconMaterial = new THREE.MeshBasicMaterial({        map:THREE.ImageUtils.loadTexture('images/plantIcon.png')
           });
          var icon = new THREE.Mesh(iconGeometry,iconMaterial);
          icon.position.x = objPosition.x;
          icon.position.y = objPosition.z;
  
          combined.merge(square.geometry, square.matrix);
          combined.merge(icon.geometry, icon.matrix);
           var display = new THREE.Line(combined, new THREE.MeshBasicMaterial({
              color: color,
          }));
  
          scene.add(display);
  </code></pre>