基于Threejs的web3D项目优化实践
基于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.
新闻技联动态
- BIRTV2023 媒体大模型创新和应用技术交流会 邀请函 2023-07-26
- 【邀请函】中国新闻技联2023 年学术年会 2023-07-20
- 新融合与智安全高峰论坛隆重召开! 2023-04-20
- 首个全国性媒体AIGC研究机构在广西成立 2023-04-14
- 【邀请函】“数字中国”下的媒体新机遇 “王选奖”获奖案例分享会暨媒体融合创新发展研讨会 2023-03-23
- [邀请函]"中国新闻技联"市县融媒体分会2023年学术年会 2023-03-15
- 推动知识资源平台合规健康发展 共促数字版权规范化合理化 2023-03-06
- 成功举办中国新闻技术工作者联合会市县融媒体分会年会暨换届大会 2022-12-23
- 中国新闻技联新闻信息标准化分会 2022年年会成功召开 2022-12-01
- 《机器生产内容自动化分级》团体标准 正式发布实施 2022-12-01