为什么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