なぜ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 JSは単一theadedであり、ファイルがロードされると、非同期のあるもの、それはそれを解析するために開始し、すべてを作成するため、何が呼ばれている

Answer 1

それが完了するまでJSのために利用可能な1つのスレッドを使用するので、 "ブロック"プロセスです。その後、アニメーションが再開されます。このようなプロセスが実行されている間、UIはフリーズまたはブロックされます。これは、処理時間が単一のフレーム（1000/60ms）の持続時間よりもはるかに長いために発生します。そのため、ブラウザは他のすべてのアニメーションを更新することができません。

唯一の方法は、解析および作成タスクを複数の小さなタスクに分割することです。これは、アニメーションフレームごとに1つずつ実行するか、タイムアウトで実行できます。その間、アニメーションを実行すると処理時間が長くなります。あなたのアニメーションが滞っている理由ですので、

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

正しいこと言ったフィリップ：initialiaionあなたは、各フレームのようなものを必要とする実行中にアニメーションを表示するには

。しかし、私はsetTimeoutを使う以外にも、Webワーカーでcolladaファイルを解析したいと思うかもしれないと付け加えます。既に使用しているライブラリがいくつかあります：https://github.com/jagenjo/collada.js/tree/master