在Three.js中挤出数千个挤压形状的孔非常慢

Question

使用Three.js我希望可视化3个形状，每个形状有数千个不同大小的孔（32x133）。这些孔将从最终版本中的数组中获取半径，但是现在我只使用了随机大小。最后，使用ExtrudeGeometry挤压形状。

我修改了一个在线example并创建了一个循环来推动我的形状：

var panelW = 450,
    panelH = 1750;

var screenPanel1 = new THREE.Shape();

( function roundedRect( ctx, x, y, width, height, radius ){

    ctx.moveTo( x, y + radius );
    ctx.lineTo( x, y + height - radius );
    ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
    ctx.lineTo( x + width - radius, y + height) ;
    ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
    ctx.lineTo( x + width, y + radius );
    ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
    ctx.lineTo( x + radius, y );
    ctx.quadraticCurveTo( x, y, x, y + radius );

} )( screenPanel1, 0, 0, panelW, panelH, 10 );

var hsMargin = 30,
    hsDist = 12,
    hsXcount = Math.floor( ( panelW - ( hsMargin * 2 ) ) / hsDist ) + 1,
    hsYcount = Math.floor( ( panelH - ( hsMargin * 2 ) ) / hsDist ) + 1;

var hc = 1;

for (var hx = 0; hx < hsXcount; hx++) {
    // for (var hy = 0; hy < hsYcount; hy++) { //this takes AGES!
    for (var hy = 0; hy < 10; hy++) {

        hsRad = Math.random() * 4 + 1;
        var hsX = hsDist * hx + hsMargin + hsRad;
        var hsY = hsDist * hy + hsMargin + hsRad;

        var holePath = new THREE.Path();
        holePath.moveTo( hsX, hsY );
        holePath.absarc( hsX-hsRad, hsY, hsRad, 0, Math.PI*2, true );
        screenPanel1.holes.push( holePath );

        hc++;
        info.innerHTML = 'holes: ' + hc;

    }

}

jsFiddle

即使只有10排孔，这也非常慢。

我做错了吗？或者有更好的方法吗？

编辑：刚刚在GitHub上找到了这个issue，看来它是当前的三角测量方法导致我的情况下性能缓慢（使用大量漏洞）。这个jsFiddle使用了对具有多边形近线性三角剖分的Three.js库的jahting修订，速度要快得多。我希望它最终会进入官方图书馆！