爲什麼THREE.ColladaLoader會暫停網站上的所有活動？

我正在加載動畫的.dae文件，並且我使用'onProgress'參數來查看加載進度。該文件在2秒內加載到74％，但整個頁面在實際加載模型（以及所有其他活動暫停，包括css動畫）之前再暫停23秒。我添加了一個setInterval（）來顯示進度，但是一旦裝載程序達到74％就會停止。在頁面加載時，這是我的代碼：爲什麼THREE.ColladaLoader會暫停網站上的所有活動？

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

來源

2016-09-29 EJW

這是因爲JS是單theaded，一旦文件被加載，什麼是異步的，則開始分析它，並創造一切，所謂的「阻塞」進程，因爲它使用了一個可用於JS的線程，直到它完成。之後你的動畫重新開始。在這樣的過程正在運行時，用戶界面被凍結或被阻止。發生這種情況的原因是處理時間比單幀（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，所以這就是爲什麼你的動畫被卡住。

若要在initialiaion運行，你需要這樣的事情每一幀顯示的動畫：

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

來源

2016-09-30 05:31:26 philipp

說什麼菲利普是正確的。不過，我只是補充說，除了使用setTimeout，你可能還想嘗試解析webworker中的collada文件。有一些庫已經這樣做，你可以使用：https://github.com/jagenjo/collada.js/tree/master

來源

2016-10-06 23:59:57 mikestaub

這是否與THREE.js一起工作？我們目前正在使用該庫中的ColladaLoader，我似乎無法找到是否以及如何一起工作:)？ –

爲什麼THREE.ColladaLoader會暫停網站上的所有活動？

回答

相關問題