为什么 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 ms，这就是你的动画卡住的原因。

要在初始化运行时显示动画，每帧都需要这样的内容：

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

Answer 2

菲利普说的是对的。但是我只想补充一点，除了使用 setTimeout 之外，您可能还想尝试在 webworker 中解析 collada 文件。您可以使用一些已经执行此操作的库：https://github.com/jagenjo/collada.js/tree/master