Three.jsで二次元の物体に穴を開けたい

Question

前提・実現したいこと

30×30の正方形に、長方形の穴を開けたいです。円形の穴は開けられるのですが、長方形だとうまくいきません。
ぜひ皆様の知恵をお貸しいただきたいです。よろしくお願いします。

発生している問題・エラーメッセージ

穴が空きません

該当のソースコード

function drawShape() { 
　　　　　　var shape = new THREE.Shape();   //この正方形に穴を開けたい
          shape.moveTo(0,0);
          shape.lineTo(0,30);
          shape.lineTo(30,30);
          shape.lineTo(30,0);
          shape.lineTo(0,0);

          var rect = new THREE.Shape();  //この形に穴を開けたい
          rect.moveTo(5,10);
          rect.lineTo(5,25);
          rect.lineTo(25,15);
          rect.lineTo(5,15);
          rect.lineTo(5,10);
          shape.holes.push(rect);

          var hole2 = new THREE.Path();  //これはうまくいく
          hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);
          shape.holes.push(hole2);

    　　　　return shape;
        }

試したこと

var rect = new THREE.Shape(); を
var rect = new THREE.Path();　に
してみましたが変わりありませんでした。