基于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.
新聞技聯動態(tài)
- BIRTV2023 媒體大模型創(chuàng)新和應用技術交流會 邀請函 2023-07-26
- 【邀請函】中國新聞技聯2023 年學術年會 2023-07-20
- 新融合與智安全高峰論壇隆重召開! 2023-04-20
- 首個全國性媒體AIGC研究機構在廣西成立 2023-04-14
- 【邀請函】“數字中國”下的媒體新機遇 “王選獎”獲獎案例分享會暨媒體融合創(chuàng)新發(fā)展研討會 2023-03-23
- [邀請函]"中國新聞技聯"市縣融媒體分會2023年學術年會 2023-03-15
- 推動知識資源平臺合規(guī)健康發(fā)展 共促數字版權規(guī)范化合理化 2023-03-06
- 成功舉辦中國新聞技術工作者聯合會市縣融媒體分會年會暨換屆大會 2022-12-23
- 中國新聞技聯新聞信息標準化分會 2022年年會成功召開 2022-12-01
- 《機器生產內容自動化分級》團體標準 正式發(fā)布實施 2022-12-01