title: How to do `object1` into `object2` add in Three.js?
body: <p>I created two objects. <code>square1</code> and <code>square2</code> objects. I expected output <code>Double line square object</code>. but single square object only visible. How to do this visible double line square object? </p>
  
  <p>Below my code.</p>
  
  <pre><code>function doubleSquareDraw(startX, startY, endX, endY, color){
  
  
         var combined = new THREE.Geometry(); 
         var square1 = new THREE.Shape();
         square1.moveTo(startX, startY, 0);
         square1.lineTo(endX, startY, 0);
         square1.lineTo(endX, endY, 0);
         square1.lineTo(startX, endY, 0);
         square1.lineTo(startX, startY, 0);
  
         var square2 = new THREE.Path();
         square2.moveTo(startX + 10 , startY  - 10 , 0);
         square2.lineTo(endX - 10 , startY - 10 , 0);
         square2.lineTo(endX - 10, endY + 10 , 0);
         square2.lineTo(startX + 10 , endY + 10 , 0);
         square2.lineTo(startX + 10 , startY  - 10 , 0);
         square1.holes.push( square2);
  
         var scene = new THREE.Scene();
         var group = new THREE.Group();
         group.position.y=50;
         scene.add(group);
  
  
        var points = square1.getPoints();
        var geometry = new THREE.Geometry().setFromPoints( points );
        var display = new THREE.Line(geometry, new THREE.LineBasicMaterial({
              color: color
          }));
         group.add( display );
          return display;
  }
  </code></pre>