一种同时支持app、h5加载3D模型的方法技术

本发明专利技术公开了一种同时支持app、h5加载3D模型的方法，包括：S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。测试结果进行数据优化。测试结果进行数据优化。

【技术实现步骤摘要】
一种同时支持app、h5加载3D模型的方法


[0001]本专利技术涉及互联网
，具体涉及一种同时支持app、h5加载3D模型的方法。

技术介绍

[0002]随着科学技术的发展，网页端与移动端的交互应用深入人们的使用体验中，uniap通过vue+js+html进行编写，是整个h5页面编写的技术栈，但是，在app上并没有文件下载的基础对象。因此，在涉及到html2、canvas、canvas2、imge、threejs这些的前端类库就无法使用，uniapp为多平台框架，如果需要h5、app同时支持threejs记载3D模型，则需要设计一种基于uniapp同时支持app、h5加载3D模型的方法。

技术实现思路

[0003]本专利技术提供一种同时支持app、h5加载3D模型的方法，以解决现有技术中存在的上述问题。
[0004]一种同时支持app、h5加载3D模型的方法，其特征在于，包括：
[0005]S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；
[0006]S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；
[0007]S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；
[0008]S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。
[0009]优选的，步骤20，包括：
[0010]S201：在uniapp框架的服务器端上传3D模型并生成与3D模型对应的加载地址；
[0011]S202：app应用程序获取3D模型的加载地址，并将加载地址传递给uniapp框架中的加载控件中；
[0012]S203：将h5页面中的文档解析为文档对象模型树；使用编程脚本在unipp框架中的视图层操作文档对象模型树，并通过遍历文档对象模型树运行uniapp中的编程脚本；
[0013]S204：调用uniapp框架中预设的类方法将3D模型中的数据传输回视图层进行显示。
[0014]优选的，步骤40之后，还包括：
[0015]S50：用户点击app应用程序中的3D模型，app应用程序通过加载控件传递3D模型，并在uniapp框架中的服务层对加载控件进行调用；
[0016]S60：在uniapp框架中的服务层预设用于调用加载3D模型的类方法；
[0017]S70：在视图层中预设一种函数用于返回调用服务层中用于加载3D模型的类方法；
[0018]S80：在uniapp框架中的视图层显示最终加载到的3D模型。
[0019]优选的，步骤S80，包括：
[0020]S801：app应用程序获得3D模型的加载地址，用户在uniapp框架的视图层中手动点击3D模型，3D模型将加载地址传递到uniapp框架的服务层中；
[0021]S802：在服务层中，将视图层用于绑定3D模型加载地址的编程脚本进行处理，编程脚本为renderjs；
[0022]S803：在完成处理后由服务层改变绑定3D模型的加载地址，当3D模型的加载地址在服务层中发生变化时，renderjs中3D模型的加载地址同步发生变化。
[0023]优选的，步骤S803之后，还包括：
[0024]S804：renderjs获得3D模型加载地址变化的消息后则调用3D绘图协议中的引擎，引擎为threejs，用于加载3D模型；
[0025]S805：判断当前3D模型是否加载成功，并向renderjs返回加载结果；
[0026]S806：renderjs获取加载结果，并通过预设的调用方法将加载结果返回到服务层，调用方法中包括两个调用参数，调用方法名作为第一参数以及传递参数作为第二参数；
[0027]S807：服务层将获取到的加载结果传递给视图层，若加载成功，则直接在视图层进行显示，若加载失败，则对服务层返回提示信息。
[0028]优选的，步骤S30，包括：
[0029]S301：构建h5页面渲染逻辑的第一模块类，第一模块类用于对实现加载3D模型的整个屏幕显示界面的封装，功能为管理调度3D模型中包含图层的整个渲染流程，包括图层创建、图层尺寸调整以及图层合成，并将多种图层中的元素进行组合；
[0030]S302：构建h5页面渲染逻辑的第二模块类，第二模块类用于对h5页面中的画布标签进行封装，画布标签为canvas；在画布标签的图层中进行图像绘制，获取将h5页面渲染需求进行解析到的指令以及参数信息，调用第二模块类中封装的图像绘制函数，图像绘制函数包括图像绘制方法、矩形复制方法、弧形绘制方法、颜色填充方法以及图像传输方法；
[0031]S303：通过调用第一模块类与第二模块类，生成用于h5页面渲染的数据。
[0032]优选的，步骤303之后，还包括：
[0033]S304：对h5页面图像进行处理，创建自定义协议，用于客户端接收到数据后根据自定义协议的格式解析出操作指令和操作参数；
[0034]S305：通过调用自定义协议中的类方法执行操作指令中与数据对应的图像绘制函数，准备执行图像绘制函数进行3D模型的绘制；
[0035]S306：判断当前客户端是否支持用于图像绘制的类方法，若是，则创建写入流将操作指令输入到写入流的任务队列中；若否，则创建数据的唯一标识符，将唯一标识符作为操作参数添加到操作指令中，同样输入到任务队列中；
[0036]S307：在数据加载完毕后，执行图像绘制函数，开始3D模型的渲染工作。
[0037]优选的，步骤S307之后，还包括：
[0038]S308：构建图层合成模块，用于在app应用程序中根据页面的自身情况单独执行图层渲染操作，并在渲染操作执行完成后当前页面将渲染图层发送至图层合成模块中；
[0039]S309：获取图层合成模块中各个图层的属性信息，将属性信息分为目标区域与背景区域，目标区域作为用于实现加载3D模型的属性信息，背景区域作为剩余需要图层渲染
的属性信息；
[0040]S310：获取目标区域的所在图层合成为待显示区域，将待显示区域分为横向显示与纵向显示，通过调节待显示区域的尺寸，完成3D模型在app的屏幕上显示为合适大小的图像。
[0041]优选的，步骤S310之后，还包括：
[0042]S311：用户在app应用程序中点击3D模型，根据用户的动作触发分为第一模式与第二模式，第一模式包括屏幕的横向显示，第二模式包括屏幕的纵向显示；
[0043]S312：计算屏幕中待显示区域中的面积与屏幕面积的比例值，并分别判断在第一模式与第二模式下的比例值是否小于预设比值，若是，则不对当前图层进行操作，若不是本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种同时支持app、h5加载3D模型的方法，其特征在于，包括：S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。2.根据权利要求1所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤20，包括：S201：在uniapp框架的服务器端上传3D模型并生成与3D模型对应的加载地址；S202：app应用程序获取3D模型的加载地址，并将加载地址传递给uniapp框架中的加载控件中；S203：将h5页面中的文档解析为文档对象模型树；使用编程脚本在unipp框架中的视图层操作文档对象模型树，并通过遍历文档对象模型树运行uniapp中的编程脚本；S204：调用uniapp框架中预设的类方法将3D模型中的数据传输回视图层进行显示。3.根据权利要求1所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤40之后，还包括：S50：用户点击app应用程序中的3D模型，app应用程序通过加载控件传递3D模型，并在uniapp框架中的服务层对加载控件进行调用；S60：在uniapp框架中的服务层预设用于调用加载3D模型的类方法；S70：在视图层中预设一种函数用于返回调用服务层中用于加载3D模型的类方法；S80：在uniapp框架中的视图层显示最终加载到的3D模型。4.根据权利要求3所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤S80，包括：S801：app应用程序获得3D模型的加载地址，用户在uniapp框架的视图层中手动点击3D模型，3D模型将加载地址传递到uniapp框架的服务层中；S802：在服务层中，将视图层用于绑定3D模型加载地址的编程脚本进行处理，编程脚本为renderjs；S803：在完成处理后由服务层改变绑定3D模型的加载地址，当3D模型的加载地址在服务层中发生变化时，renderjs中3D模型的加载地址同步发生变化。5.根据权利要求4所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤S803之后，还包括：S804：renderjs获得3D模型加载地址变化的消息后则调用3D绘图协议中的引擎，引擎为threejs，用于加载3D模型；S805：判断当前3D模型是否加载成功，并向renderjs返回加载结果；S806：renderjs获取加载结果，并通过预设的调用方法将加载结果返回到服务层，调用
方法中包括两个调用参数，调用方法名作为第一参数以及传递参数作为第二参数；S807：服务层将获取到的加载结果传递给视图层，若加载成功，则直接在视图层进行显示，若加载失败，则对服务层返回提示信息。6.根据权利要求1所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤S30，包括：S301：构建h5页面渲染逻辑的第一模块类，第一模块类用于对实现加载3D模型的整个屏幕显示界面的封装，功能为管理调度3D模型中包含图层的整个渲染流程，包括图层创建、图层尺寸调整以及图层合成...

【专利技术属性】
技术研发人员：韩黎光，王信，
申请(专利权)人：红石阳光北京科技股份有限公司，
类型：发明
国别省市：