基于Threejs的web3D项目优化实践

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

基于Threejs的web3D项目优化实践

文  娇

(四川封面传媒有限责任公司)

【摘  要】随着网络技术的飞速发展,浏览器对WebGL越来越成熟的支持。Three.js作为基于WebGL的3D JavaScript库,以浏览器为运行平台,让用户在网页中,即可获得动画3D场景,加载各种3D模型;从而被广泛使用。当然由于Three.js库仍然处在不断的开发、优化与更新阶段,所以在我们的实际开发运用中,会遇到各种各样的问题。本文对实际开发运用中,遇到的一些问题做了一些总结,以及提出了一些优化解决方案,以供后来者参考。

【关健词】Three.js全景图3D模型

1  性能问题

在实践中发现VUE+Threejs项目中,即使将对应的组件卸载掉,仍然不能完全释放内存,切换的场景、模型越多,叠加消耗的内存越高,最终导致页面崩溃、闪退。

针对于这种情况,有以下三种解决方案:

1.1  标记并销毁资源

渲染场景的时候会用到很多网格、几何体,贴图,模型等等,对这些资源都统一做标记,并放入一个统一的资源对象中,卸载组件的时候,再对这些资源统一处理,一一销毁,释放内存,提升性能。

1.2清空渲染器缓存

调用WebGLRenderer的forceContextLoss方法。模拟WebGL环境的丢失,清空渲染器缓存,从而释放WebGLRenderer占用内存提升页面性能。

1.3  图片占位

两个场景叠加切换的时候,在切换过程中,需要保留上一个场景,可以对上一个场景的最后一帧做截图处理(调用renderer.domElement.toDataURL('image/jpeg')方法),再使用截图做一个占位。在用户角度上是没有任何区别的,但是对于浏览器而言,就可以释放掉一个场景所占用的内存,页面上始终只运行一个场景,节约资源,降低内存消耗,提升页面性能。

2  3D模型加载问题

在我们的项目应用中,需要产出一个3D模型渲染器,针对后台上传的所有fbx格式模型,在浏览器盒子的一定范围内,做出呈现和渲染。

在模型渲染器制作过程中,需要考虑的问题,主要集中在以下三个方面:

2.1灯光

如果场景内没有光源的存在,3D模型会整体呈现黑色,这肯定不是我们想要的效果,所以需要对场景进行灯光处理。依据Threejs各光源特性,再结合我们项目的实际场景,选用了环境光和平行光结合使用的方式。光源颜色和模型制作方商量之后,选用了相对试用比较广的白色,光照强度定位0.8。

2.2模型居中且完整显示

由于各个模型的尺寸和位置各不相同,要模型在盒子内居中且完整的显示,需要先获取模型的原始尺寸,再根据容器比例,计算出模型完整显示的缩放值,将模型重新缩放到标准化空间,再根据缩放值和容器大小让模型居中。

2.3其他

模型上透明贴图渲染有白底问题,材质添加alphaTest属性,添加的模型,如果有多个,可以放进一个grounp组容器中,方便操作缩放、位移等。

3  其他

3.1  全景直播

移动端兼容安卓和ios系统的直播格式是m3u8格式,做全景直播的时候,安卓端需要引用需要引用Hlsjs,播放直播,然后再用THREE.VideoTexture做渲染,安卓端才能正常显示全景直播画面。

3.2  全景缩放问题

全景图渲染的时候,如果一个全景上同时应用了WebGLRenderer和CSS3DRenderer,用OrbitControls库进行缩放操作,会出现WebGLRenderer层正常缩放,CSS3DRenderer层缩放不了的情况。可以修改OrbitControls源码,用修改fov值的方式,达到缩放的目的。

4  结束语

以上就是目前我们在项目实践中,遇到的一些关于Threejs的具体问题及其优化解决方案。通过这些优化解决方案,解放了我们技术团队的生产力;同时提升了性能。

参考文献:

[1]李倩.基于WebGL的3D技术在网页中的运用[J].电子测试,2020(12):125-126.

[2]刘展海,何伟,刘展航,等.基于Threejs下的WebVR开发[J].科学技术创新,2018(9):2.