如何通过渲染1000+ THREEJS精灵标签来解决阻塞问题

Question

我接近1000（并且在某些时候更多）文本精灵标签在THREEJS场景中呈现。创建精灵对象不是问题。当我将它们添加到场景时，它似乎阻止并杀死发生的任何其他动画或用户交互。

我尝试将sprite数组拆分成块，然后一次做一个块。最近我尝试使用setTimeout，但没有太多运气。我正在努力回调和setTimeout。 以下是我到目前为止的情况：

function addlabels(data){
label_array = [];
    $.each(data.nodes, function (key, value) {
        var position = value.pos;
        var vector = new THREE.Vector3(position[0], position[1], position[2]);
        value.label = makeTextSprite(key, {fontsize:32});
        value.label.position.copy(vector);
        label_array.push(value.label);
    });

    function chunk_labels(items, process, context){
        var todo = items.concat();
        setTimeout(function(){
            do {
                console.log(context, todo.shift());
                scene.add(todo.shift());
            } while(todo.length > 0);
            if (todo.length > 0){
                setTimeout(chunk_labels(todo), 25);
            }else{
                callback(items);
            }
        }, 25);
    }

    chunk_labels(label_array);
}