對於循環令人不安的渲染

Question

我有一些非常簡單的3D對象（基本上是THREE.Sphere，它是1-30其他THREE.Sphere的父級，具有RGB顏色和沒有紋理）以實時動畫顯示。

確實很快就完成了渲染，但我有一些簡單的迭代計算（for-loops），這些計算擾亂了我的顯示功能。 渲染本身是沒有問題的，但對下一幀頂點的計算是什麼引起的疼痛

意思是，當我運行該腳本，我可以看到for-loops正在採取太多的時間來計算，然後它就會立即進入渲染部分。

我在想這個問題，方式之運行的線程並行計算處理的（工人，不管它被稱爲在JS），將計算for-loop，但我認爲，考慮到我缺乏計算機graphocs經驗，也許有一個更「圖形」的方式來這樣做。意味着處理計算機圖形設計這樣一個基本問題的更優雅/性能改進/自然的方式。

Answer 1

這是我用來做很長時間的慢計算，不會被看門狗定時器捕獲，並導致瀏覽器或渲染速率陷入困境。 基本思想是你使用一個javascript生成器，它允許你在計算過程中屈服，然後繼續。然後，我在超時鏈上運行發生器泵。 此方法的關鍵是「yield」運算符，它保存函數狀態並返回，以等待將來調用.next（）函數。 （順便說一句，這個演示代碼可能需要重新編排，以處理firefox的前向參考）

//function Chain represents the slow code 
function *Chain() 
{ 
    for(i=0;i<1000000;i++) //this represents a long slow calculation 
    { 
     if(i%100==0)  //on occassion, yield 
      yield; 
    } 

} 
console.log("starting chain"); 
gChain=Chain(); //startup and get the next generator pointer 
timeout = setTimeout(function() { ChainStart(); }, 1); 
//function ChainStart is a pump that runs the generator using a timeout chain so other threads can run 
function ChainStart(){     
     if(gChain.next().done){ 
      clearTimeout(timeout); 
      console.log("endingchain");     
     } 
     else{      
      clearTimeout(timeout); 
      timeout = setTimeout(function() { ChainStart(); }, 1); 
     } 
}