I created two objects. `square1` and `square2` objects. I expected output `Double line square object`. but single square object only visible. How to do this visible double line square object? 

Below my 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;
}

```