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