javascript - 为什么 THREE.ColladaLoader 会停止网站上的所有事件？

Question

我正在加载一个动画 .dae 文件，并且我使用了“onProgress”参数来查看它的加载进度。文件在 2 秒内加载到 74%，但随后整个页面在模型实际加载之前暂停了 23 秒(以及所有其他事件暂停，包括 css 动画)。我添加了 setInterval() 来显示进度，但一旦加载程序达到 74%，它也会停止。 在页面加载时，这是我的代码:

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('models/swing_dancing.dae', function(collada) {
    dae = collada.scene;
    dae.traverse(function(child) {
        if (child instanceof THREE.SkinnedMesh) {
            var animation = new THREE.Animation(child, child.geometry.animation);
            animation.play();
        }
    });

    dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
    dae.updateMatrix();

    init();
    animate();

}, function(xhr) {
    console.log(('progress ' + xhr.loaded / xhr.total * 100) + '% loaded')
});

有什么想法吗？我正在构建 example here和 documentation here

Answer 1

那是因为 JS 是单线程的，一旦文件被加载，什么是异步的，它就开始解析它并创建所有内容，这就是所谓的“阻塞”过程，因为它使用 JS 可用的一个线程直到完成。之后您的动画将恢复。当此类进程运行时，UI 会被卡住或阻止。发生这种情况是因为处理时间比单帧的持续时间(1000/60ms)长得多，因此浏览器无法更新 ui 和所有其他动画。

解决这个问题的唯一方法是将解析和创建任务分成多个较小的任务，这些任务可以在每个动画帧中一一执行，或者超时。这样，您运行动画的同时就会获得一些处理时间。

举例说明:

   ms | frame | task
------+-------+------------- 
    0 |   0   | update preload animation
..........................................
    n |   m   | update preload animation + start to process data from server
------------------------------------------
    h | m+1   | processing (parsing *dea, creating objects)
------------------------------------
 h+3s | m+2   | processing done, animation and UI updates continue

因此帧 m+1 的长度约为 3 秒，但应该是 100/6 毫秒，这就是动画卡住的原因。

要在初始运行时显示动画，您需要每帧如下所示:

frame n    update Animation, process subtask (<-- this must not take too long)
frame n+1 .
frame n+2 .
frame n+3 .

Until all substasks are executed