基于Threejs的web3D項(xiàng)目優(yōu)化實(shí)踐

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

基于Threejs的web3D項(xiàng)目優(yōu)化實(shí)踐

文  嬌

(四川封面?zhèn)髅接邢挢?zé)任公司)

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

【關(guān)健詞】Three.js全景圖3D模型

1  性能問題

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

針對于這種情況,有以下三種解決方案:

1.1  標(biāo)記并銷毀資源

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

1.2清空渲染器緩存

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

1.3  圖片占位

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

2  3D模型加載問題

在我們的項(xiàng)目應(yīng)用中,需要產(chǎn)出一個(gè)3D模型渲染器,針對后臺上傳的所有fbx格式模型,在瀏覽器盒子的一定范圍內(nèi),做出呈現(xiàn)和渲染。

在模型渲染器制作過程中,需要考慮的問題,主要集中在以下三個(gè)方面:

2.1燈光

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

2.2模型居中且完整顯示

由于各個(gè)模型的尺寸和位置各不相同,要模型在盒子內(nèi)居中且完整的顯示,需要先獲取模型的原始尺寸,再根據(jù)容器比例,計(jì)算出模型完整顯示的縮放值,將模型重新縮放到標(biāo)準(zhǔn)化空間,再根據(jù)縮放值和容器大小讓模型居中。

2.3其他

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

3  其他

3.1  全景直播

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

3.2  全景縮放問題

全景圖渲染的時(shí)候,如果一個(gè)全景上同時(shí)應(yīng)用了WebGLRenderer和CSS3DRenderer,用OrbitControls庫進(jìn)行縮放操作,會出現(xiàn)WebGLRenderer層正??s放,CSS3DRenderer層縮放不了的情況??梢孕薷腛rbitControls源碼,用修改fov值的方式,達(dá)到縮放的目的。

4  結(jié)束語

以上就是目前我們在項(xiàng)目實(shí)踐中,遇到的一些關(guān)于Threejs的具體問題及其優(yōu)化解決方案。通過這些優(yōu)化解決方案,解放了我們技術(shù)團(tuán)隊(duì)的生產(chǎn)力;同時(shí)提升了性能。

參考文獻(xiàn):

[1]李倩.基于WebGL的3D技術(shù)在網(wǎng)頁中的運(yùn)用[J].電子測試,2020(12):125-126.

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