如何使用二维一个或两个形状图合并绘制的three.js？

Question

我是三个j的新人。我尝试将一个形状图转换为另一个形状添加/组。 （'我绘制在一个方形对象中，我在另一个方形对象中绘制。这两个对象如何合并双线方形对象显示'）。我尝试了不同的方法。在我的代码下面。

//method 1

function doubleSquareDraw(startX, startY, endX, endY, color){

   var square = new THREE.Shape();
   square.moveTo(startX, startY, 0);
   square.lineTo(endX, startY, 0);
   square.lineTo(endX, endY, 0);
   square.lineTo(startX, endY, 0);
   square.lineTo(startX, startY, 0);

   var square2 = new THREE.Path();
   square2.moveTo(startX + 4 , startY  - 4 , 0);
   square2.lineTo(endX - 4 , startY - 4 , 0);
   square2.lineTo(endX - 4, endY + 4 , 0);
   square2.lineTo(startX + 4 , endY + 4 , 0);
   square2.lineTo(startX + 4 , startY  - 4 , 0);
   square.holes.push( square2);

  var geometry = new THREE.BufferGeometry().setFromPoints(square.getPoints());  
  var doubleLineSquare = new THREE.Line(geometry, new THREE.MeshBasicMaterial({
        color: color
    }));

    return doubleLineSquare;
}

//method 2

 var bed = new THREE.Shape();
         bed.moveTo(startX, startY, 0);
         bed.lineTo(endX, startY, 0);
         bed.lineTo(endX, endY, 0);
         bed.lineTo(startX, endY, 0);
         bed.lineTo(startX, startY, 0);

          var geometry = new THREE.BufferGeometry().setFromPoints(bed.getPoints());
        var bed = new THREE.Line(geometry, new THREE.MeshBasicMaterial({
            color: "#000000"
        }));

         var bed2 = new THREE.Path();
         bed2.moveTo(startX + 10, startY - 10, 0);
         bed2.lineTo(endX - 10, startY - 10, 0);
         bed2.lineTo(endX - 10, endY + 10, 0);
         bed2.lineTo(startX + 10, endY + 10, 0);
         bed2.lineTo(startX + 10, startY - 10, 0);

          var geometry = new THREE.BufferGeometry().setFromPoints(bed2.getPoints());
          var bed = new THREE.Line(geometry, new THREE.MeshBasicMaterial({
            color: "#000000"
          }));

           var group = new THREE.Group();
           group.add( bed );
           group.add( bed2 );
           return group;
}