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

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

文  嬌

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

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

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

1  性能問題

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

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

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

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

1.2清空渲染器緩存

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

1.3  圖片占位

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

2  3D模型加載問題

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

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

2.1燈光

如果場(chǎng)景內(nèi)沒有光源的存在，3D模型會(huì)整體呈現(xiàn)黑色，這肯定不是我們想要的效果，所以需要對(duì)場(chǎng)景進(jìn)行燈光處理。依據(jù)Threejs各光源特性，再結(jié)合我們項(xiàng)目的實(shí)際場(chǎng)景，選用了環(huán)境光和平行光結(jié)合使用的方式。光源顏色和模型制作方商量之后，選用了相對(duì)試用比較廣的白色，光照強(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庫(kù)進(jìn)行縮放操作，會(huì)出現(xiàn)WebGLRenderer層正?？s放，CSS3DRenderer層縮放不了的情況。可以修改OrbitControls源碼，用修改fov值的方式，達(dá)到縮放的目的。

4  結(jié)束語(yǔ)

以上就是目前我們?cè)陧?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è)中的運(yùn)用[J].電子測(cè)試，2020(12):125-126.

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