【three.js-效能優化】three.js效能優化
轉載：three.js效能優化
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。在使用的時候，雖然three.js 做了優化，但是在使用不恰當的程式碼，也會產生效能損耗。幀率越低，給人感覺就越卡。這是我在開發中自己百度總結的，有不對的可以聯絡我啊
1、預載入
在載入頁面之前可以給個載入頁面的緩衝，因為場景模型沒有載入的時候會黑屏，載入一瞬間可能會出現閃屏等效能問題，十分影響使用者體驗的。
2、能用BufferGeometry代替Geometry的儘量用BufferGeometry
BufferGeometry 會快取網格模型，效能要高效點。網格模型生成原理
1、Geometry 生成的模型是這樣的 （程式碼）-> (CUP 進行資料處理，轉化成虛擬3D資料) -> (GPU 進行資料組裝，轉化成畫素點，準備渲染) -> 顯示器
第二次操作時重複走這些流程。
2、BufferGeometry 生成模型流程 (程式碼) -> (CUP 進行資料處理，轉化成虛擬3D資料) -> (GPU 進行資料組裝，轉化成畫素點，準備渲染) -> (丟入快取區) -> 顯示器
第二次修改時，通過API直接修改快取區資料，流程就變成了這樣
(程式碼) -> (CUP 進行資料處理，轉化成虛擬3D資料) -> (修改快取區資料) -> 顯示器
節約了GPU效能的運算效能。
3、少在requestAnimationFrame()動畫下面執行操作
因為requestAnimationFrame（）每秒執行60次，你要是在裡面加個for迴圈，你的程式碼就炸了。還要減少浮點計算，系統對浮點計算開支比較大，儘量寫成小數乘法。
4、學會使用clone()方法
| 1 2 3 |
var box=new THREE.BoxGeometry(10,10,10);//建立一個立方體幾何物件 var box2 = box.clone();//克隆幾何體 box2.scale.set(2,2,2);//通過縮放調整大小 |
clone()返回一個新的幾何體物件，返回新的幾何體物件包含原來的幾何體頂點資料、頂點索引資料、UV座標資料。就不用重新建立相同的物件，浪費時間，具體詳細可以看這篇文章
5、紋理圖片尺寸一定得是2的冪次方，並儘可能的小
使用 new THREE.TextureLoader().load( “water.jpg” )載入紋理貼圖時，如果不是2的冪次方，那麼three.js就會自動轉為最合適的2的冪次方尺寸，並在控制檯打印出黃色警告。這個不是three.js設定的，是webgl限制的，是為了適合Mipmap（為了加快渲染速度和減少影象鋸齒，貼圖被處理成由一系列被預先計算和優化過的圖片組成的檔案）設定。
圖片儘可能的小，合併，圖片越大不代表越清晰，也會和紋理過濾等各屬性有關。降低圖片大小，減少記憶體佔用。
6、跳幀設定
| 1 2 3 4 5 6 7 8 9 10 11 |
var skip; function render(){ requestAnimationFrame(); if(skip !== 0) { skip = ++skip % 2; return; } else { skip = ++skip % 2; } console.log("i",i); } |
這樣每到skip的時候跳過一次渲染執行，以減少渲染次數，在保證不影響使用者體驗的情況下，儘可能的多跳幀。
7、對粒子群進行轉換，而不是每個粒子
使用THREE.Sprite時，可以更好地控制單個粒子，但是當使用大量的粒子的時候，這個方法的效能會降低，並且會更復雜。此時可以使用THREE.SpriteCloud，可以輕鬆地管理大量的粒子，進行整體操作，此時對單個粒子的控制能力會減弱。
8、模型的面越少越好，模型過於細緻會增加渲染開銷
three場景匯入模型時，可以在保證最低清晰度的時候，降低模型的複雜度，面越多，模型越大，載入所需開銷就越大
9、效能檢測外掛（stats.js）
使用該外掛進行檢測幀率，網上有很多使用教程，可以自己百度
10、使用chrome的外掛three.js inspector，可以在控制檯除錯檢視場景中的各個模型等
