three.js性能優化

參考： 火辣辣前端博客

 three.js是JavaScript編寫的WebGL第三方庫。提供了很是多的3D顯示功能。在使用的時候，雖然three.js 作了優化，可是在使用不恰當的代碼，也會產生性能損耗。幀率越低，給人感受就越卡。這是我在開發中本身百度總結的，有不對的能夠聯繫我啊

 一、預加載 在加載頁面以前能夠給個加載頁面的緩衝，由於場景模型沒有加載的時候會黑屏，加載一瞬間可能會出現閃屏等性能問題，十分影響用戶體驗的。  

二、能用BufferGeometry代替Geometry的儘可能用BufferGeometry BufferGeometry 會緩存網格模型，性能要高效點。

網格模型生成原理

 一、Geometry 生成的模型是這樣的 （代碼）-> (CUP 進行數據處理，轉化成虛擬3D數據) -> (GPU 進行數據組裝，轉化成像素點，準備渲染) -> 顯示器 第二次操做時重複走這些流程。 二、BufferGeometry 生成模型流程 (代碼) -> (CUP 進行數據處理，轉化成虛擬3D數據) -> (GPU 進行數據組裝，轉化成像素點，準備渲染) -> (丟入緩存區) -> 顯示器 第二次修改時，經過API直接修改緩存區數據，流程就變成了這樣 (代碼) -> (CUP 進行數據處理，轉化成虛擬3D數據) -> (修改緩存區數據) -> 顯示器 節約了GPU性能的運算性能。

 三、少在requestAnimationFrame()動畫下面執行操做 由於requestAnimationFrame（）每秒執行60次，你要是在裏面加個for循環，你的代碼就炸了。還要減小浮點計算，系統對浮點計算開支比較大，儘可能寫成小數乘法。

 四、學會使用clone()方法  

var box=new THREE.BoxGeometry(10,10,10);//建立一個立方體幾何對象
var box2 = box.clone();//克隆幾何體
box2.scale.set(2,2,2);//經過縮放調整大小複製代碼

  clone()返回一個新的幾何體對象，返回新的幾何體對象包含原來的幾何體頂點數據、頂點索引數據、UV座標數據。就不用從新建立相同的對象，浪費時間

 五、紋理圖片尺寸必定得是2的冪次方，並儘量的小 使用 new THREE.TextureLoader().load( 「water.jpg」 )加載紋理貼圖時，若是不是2的冪次方，那麼three.js就會自動轉爲最合適的2的冪次方尺寸，並在控制檯打印出黃色警告。這個不是three.js設置的，是webgl限制的，是爲了適合Mipmap（爲了加快渲染速度和減小圖像鋸齒，貼圖被處理成由一系列被預先計算和優化過的圖片組成的文件）設置。 圖片儘量的小，合併，圖片越大不表明越清晰，也會和紋理過濾等各屬性有關。下降圖片大小，減小內存佔用。

 六、跳幀設置 

var skip;
function render(){
  requestAnimationFrame();
  if(skip !== 0) {
	skip = ++skip % 2;
	return;
  } else {
	skip = ++skip % 2;
  }
  console.log("i",i);
}複製代碼

  這樣每到skip的時候跳過一次渲染執行，以減小渲染次數，在保證不影響用戶體驗的狀況下，儘量的多跳幀。  

七、對粒子羣進行轉換，而不是每一個粒子 使用THREE.Sprite時，能夠更好地控制單個粒子，可是當使用大量的粒子的時候，這個方法的性能會下降，而且會更復雜。此時可使用THREE.SpriteCloud，能夠輕鬆地管理大量的粒子，進行總體操做，此時對單個粒子的控制能力會減弱。  

八、模型的面越少越好，模型過於細緻會增長渲染開銷 three場景導入模型時，能夠在保證最低清晰度的時候，下降模型的複雜度，面越多，模型越大，加載所需開銷就越大  

九、性能檢測插件（stats.js） 使用該插件進行檢測幀率，網上有不少使用教程，能夠本身百度  

十、使用chrome的插件three.js inspector，能夠在控制檯調試查看場景中的各個模型等