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

2023/08/02-16:14 來源:

基于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.