基于Threejs的web3D項目優(yōu)化實踐

基于Threejs的web3D項目優(yōu)化實踐

文  嬌

(四川封面?zhèn)髅接邢挢熑喂?

【摘  要】隨著網絡技術的飛速發(fā)展，瀏覽器對WebGL越來越成熟的支持。Three.js作為基于WebGL的3D JavaScript庫，以瀏覽器為運行平臺，讓用戶在網頁中，即可獲得動畫3D場景，加載各種3D模型；從而被廣泛使用。當然由于Three.js庫仍然處在不斷的開發(fā)、優(yōu)化與更新階段，所以在我們的實際開發(fā)運用中，會遇到各種各樣的問題。本文對實際開發(fā)運用中，遇到的一些問題做了一些總結，以及提出了一些優(yōu)化解決方案，以供后來者參考。

【關健詞】Three.js全景圖3D模型

1  性能問題

在實踐中發(fā)現VUE+Threejs項目中，即使將對應的組件卸載掉，仍然不能完全釋放內存，切換的場景、模型越多，疊加消耗的內存越高，最終導致頁面崩潰、閃退。

針對于這種情況，有以下三種解決方案：

1.1  標記并銷毀資源

渲染場景的時候會用到很多網格、幾何體，貼圖，模型等等，對這些資源都統(tǒng)一做標記，并放入一個統(tǒng)一的資源對象中，卸載組件的時候，再對這些資源統(tǒng)一處理，一一銷毀，釋放內存，提升性能。

1.2清空渲染器緩存

調用WebGLRenderer的forceContextLoss方法。模擬WebGL環(huán)境的丟失，清空渲染器緩存，從而釋放WebGLRenderer占用內存提升頁面性能。

1.3  圖片占位

兩個場景疊加切換的時候，在切換過程中，需要保留上一個場景，可以對上一個場景的最后一幀做截圖處理(調用renderer.domElement.toDataURL('image/jpeg')方法),再使用截圖做一個占位。在用戶角度上是沒有任何區(qū)別的，但是對于瀏覽器而言，就可以釋放掉一個場景所占用的內存，頁面上始終只運行一個場景，節(jié)約資源，降低內存消耗，提升頁面性能。

2  3D模型加載問題

在我們的項目應用中，需要產出一個3D模型渲染器，針對后臺上傳的所有fbx格式模型，在瀏覽器盒子的一定范圍內，做出呈現和渲染。

在模型渲染器制作過程中，需要考慮的問題，主要集中在以下三個方面：

2.1燈光

如果場景內沒有光源的存在，3D模型會整體呈現黑色，這肯定不是我們想要的效果，所以需要對場景進行燈光處理。依據Threejs各光源特性，再結合我們項目的實際場景，選用了環(huán)境光和平行光結合使用的方式。光源顏色和模型制作方商量之后，選用了相對試用比較廣的白色，光照強度定位0.8。

2.2模型居中且完整顯示

由于各個模型的尺寸和位置各不相同，要模型在盒子內居中且完整的顯示，需要先獲取模型的原始尺寸，再根據容器比例，計算出模型完整顯示的縮放值，將模型重新縮放到標準化空間，再根據縮放值和容器大小讓模型居中。

2.3其他

模型上透明貼圖渲染有白底問題，材質添加alphaTest屬性，添加的模型，如果有多個，可以放進一個grounp組容器中，方便操作縮放、位移等。

3  其他

3.1  全景直播

移動端兼容安卓和ios系統(tǒng)的直播格式是m3u8格式，做全景直播的時候，安卓端需要引用需要引用Hlsjs,播放直播，然后再用THREE.VideoTexture做渲染，安卓端才能正常顯示全景直播畫面。

3.2  全景縮放問題

全景圖渲染的時候，如果一個全景上同時應用了WebGLRenderer和CSS3DRenderer,用OrbitControls庫進行縮放操作，會出現WebGLRenderer層正常縮放，CSS3DRenderer層縮放不了的情況?？梢孕薷腛rbitControls源碼，用修改fov值的方式，達到縮放的目的。

4  結束語

以上就是目前我們在項目實踐中，遇到的一些關于Threejs的具體問題及其優(yōu)化解決方案。通過這些優(yōu)化解決方案，解放了我們技術團隊的生產力；同時提升了性能。

參考文獻：

[1]李倩.基于WebGL的3D技術在網頁中的運用[J].電子測試，2020(12):125-126.

[2]劉展海，何偉，劉展航，等.基于Threejs下的WebVR開發(fā)[J].科學技術創(chuàng)新，2018(9):2.