为多边形加载优化three.js face3渲染

Question

我有一个大数组（50,000到100,000个元素），每个元素包含另一个3个点的数组，用于定义多边形的顶点。一些顶点具有内置于数组中的参数，例如

var array = [
[[967.6719, 657.401, -1008.1],[967.6719, 657.401, -1001.1],[967.1551, 657.4806, -1008.1]],
[[967.1551, 657.4806, -1008.1 + LENGTH],[967.6719, 657.401, -1001.1],[967.1551, 657.4806, -1001.1]],
...etc
];

长度参数由滑块控制。目前，初始加载时间太长，对参数的任何更改也需要很长时间才能更新。有没有办法优化这个？

我目前使用此代码渲染多边形;

function drawShapes(array) {

    scene.remove( all_shapes );
    all_shapes = new THREE.Object3D();
    var LENGTH = inpLength.valueAsNumber; 
    var material = new THREE.LineBasicMaterial( { color: 0x02B700, linewidth: 2 } );
    var triangleGeometry = new THREE.Geometry(); 

    for (var i=0; i < array.length; i++){
        for (var n=0; n<3; n++){
          triangleGeometry.vertices.push(new THREE.Vector3( array[i][n][0], array[i][n][1], array[i][n][2]));

        }

        triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
        triangleMesh = new THREE.Mesh(triangleGeometry, material); 
        all_shapes.add(triangleMesh)
        var triangleGeometry = new THREE.Geometry(); 
    }

    scene.add( all_shapes );

}