一种提高前端页面加载3D模型速度的方法、系统.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN114895981A(43)申请公布日2022.08.12(21)申请号202210509092.0(22)申请日2022.05.10(71)申请人安徽云森物联网科技有限公司地址231200安徽省合肥市经开区桃花工业园繁华大道与文山路交口处(72)发明人万森高东奇朱前进成皿周志鹏(74)专利代理机构合肥市泽信专利代理事务所(普通合伙)34144专利代理师潘飞(51)Int.Cl.G06F9/445(2018.01)G06F16/957(2019.01)G06F16/174(2019.01)权利要求书2页说明书7页附图2页(54)发明名称一种提高前端页面加载3D模型速度的方法、系统(57)摘要本发明涉及计算机数据处理领域，特别是涉及一种提高前端页面加载3D模型速度的方法、系统，以及执行该方法的计算机设备。该方法包括如下步骤：步骤一：获取待加载的3D模型的源文件，对源文件进行转码；步骤二：通过转码后的模型文件进行压缩，缩小文件体积；步骤三：对解压后的glTF格式的新模型文件进行优化，得到js格式的脚本文件；步骤四：将封装好的js格式的脚本文件通过渲染引擎实现加载；步骤五：在浏览器中为文件提供3D加速渲染，实现在前端页面加载3D模型的任务。该系统包括：文件转码模块、文件压缩模块、文件优化模块、文件加载模块，以及加速渲染模块。本发明解决了3D模型文件在前端页面加载过程中速度太慢，耗时过长的问题。CN114895981ACN114895981A权利要求书1/2页1.一种提高前端页面加载3D模型速度的方法，其特征在于：所述方法包括如下步骤：步骤一：获取待加载的3D模型的源文件，将所述源文件转换成通用的obj格式的模型文件，并将obj格式的模型文件转码得到glTF格式的模型文件；步骤二：通过三维图像编辑软件或插件对所述glTF格式的模型文件进行压缩，然后对压缩后的文件进行解压得到一个体积减小的glTF格式的新模型文件；步骤三：对解压后的glTF格式的新模型文件进行优化，保留所述3D模型加载过程中的必要插件；并将不同浏览器中用于加载所述3D模型的必要适配文件封装到优化后的所述glTF格式的新模型文件中，得到js格式的脚本文件；步骤四：将封装好的js格式的脚本文件通过渲染引擎实现加载，并输出为基于HTML5Canwas的图片格式的文件；步骤五：在浏览器中，采用WebGL绘图协议为基于HTML5Canwas的图片格式的文件提供3D加速渲染，展示所述图片格式的文件；实现在前端页面加载3D模型的任务。2.根据权利要求1所述的提高前端页面加载3D模型速度的方法，其特征在于：步骤一通过Blender软件完成，利用Blender软件中的格式转码功能模块，实现将不同格式的3D模型的源文件转码为通用的obj格式的模型文件，再转码得到glTF格式的模型文件的过程。3.根据权利要求1所述的提高前端页面加载3D模型速度的方法，其特征在于：步骤二中对所述glTF格式的模型文件进行压缩的过程通过Blender软件或名为“Draco”的3D图形开源压缩库完成，并通过JavaScript3Dlibrary引擎里的DRACOLoader加载器进行解压，得到所述新模型文件。4.根据权利要求3所述的提高前端页面加载3D模型速度的方法，其特征在于：步骤二中的解压过程还可以通过基于javascript或phython的程序代码实现。5.根据权利要求1所述的提高前端页面加载3D模型速度的方法，其特征在于：步骤三中，新模型文件的封装过程采用JavaScript3Dlibrary引擎里的API完成，封装后的脚本文件运行过程中通过传参的方式对不同插件进行调用。6.根据权利要求1所述的提高前端页面加载3D模型速度的方法，其特征在于：封装后的所述脚本文件中包含的用于加载所述3D模型的插件至少包括：GLTFLoader，KTXLoader，RGBELoader和Jquery。7.一种提高前端页面加载3D模型速度的系统，其特征在于，所述系统采用如权利要求1‑6任意一项所述的提高前端页面加载3D模型速度的方法，实现对不同格式的3D模型文件的加载过程，缩短3D模型文件中在浏览器前端页面中的加载时长；所述系统包括：文件转码模块，其用于将待加载的3D模型的源文件先转换成通用的obj格式的模型文件，然后再转码成glTF格式的模型文件进行输出；文件压缩模块，其用于对所述文件转码模块输出glTF格式的模型文件进行压缩，然后再解压成一个体积减小的glTF格式的新模型文件；所述压缩过程采用Blender软件或名为“Draco”的3D图形开源压缩库完成；所述文件压缩模块输出解压后的所述新模型文件；文件优化模块，其用于对所述文件压缩模块输出的glTF格式的新