CN116701807B - 一种同时支持app、h5加载3D模型的方法 - Google Patents
一种同时支持app、h5加载3D模型的方法 Download PDFInfo
- Publication number
- CN116701807B CN116701807B CN202310716584.1A CN202310716584A CN116701807B CN 116701807 B CN116701807 B CN 116701807B CN 202310716584 A CN202310716584 A CN 202310716584A CN 116701807 B CN116701807 B CN 116701807B
- Authority
- CN
- China
- Prior art keywords
- model
- loading
- layer
- uniapp
- framework
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 96
- 238000009877 rendering Methods 0.000 claims abstract description 44
- 238000012360 testing method Methods 0.000 claims abstract description 16
- 230000007246 mechanism Effects 0.000 claims abstract description 10
- 230000000694 effects Effects 0.000 claims abstract description 5
- 230000004044 response Effects 0.000 claims description 37
- 230000006870 function Effects 0.000 claims description 32
- 230000008569 process Effects 0.000 claims description 10
- 238000012545 processing Methods 0.000 claims description 10
- 238000010276 construction Methods 0.000 claims description 7
- 230000005540 biological transmission Effects 0.000 claims description 6
- 230000015572 biosynthetic process Effects 0.000 claims description 6
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000003786 synthesis reaction Methods 0.000 claims description 6
- 230000001960 triggered effect Effects 0.000 claims description 6
- 238000012546 transfer Methods 0.000 claims description 5
- 230000008859 change Effects 0.000 claims description 4
- 230000009471 action Effects 0.000 claims description 3
- 230000009286 beneficial effect Effects 0.000 description 5
- 230000008901 benefit Effects 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000005094 computer simulation Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种同时支持app、h5加载3D模型的方法，包括：S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。
Description
技术领域
本发明涉及互联网技术领域，具体涉及一种同时支持app、h5加载3D模型的方法。
背景技术
随着科学技术的发展，网页端与移动端的交互应用深入人们的使用体验中，uniap通过vue+js+html进行编写，是整个h5页面编写的技术栈，但是，在app上并没有文件下载的基础对象。因此，在涉及到html2、canvas、canvas2、imge、threejs这些的前端类库就无法使用，uniapp为多平台框架，如果需要h5、app同时支持threejs记载3D模型，则需要设计一种基于uniapp同时支持app、h5加载3D模型的方法。
发明内容
本发明提供一种同时支持app、h5加载3D模型的方法，以解决现有技术中存在的上述问题。
一种同时支持app、h5加载3D模型的方法，其特征在于，包括：
S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；
S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；
S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；
S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。
优选的，步骤20，包括：
S201：在uniapp框架的服务器端上传3D模型并生成与3D模型对应的加载地址；
S202：app应用程序获取3D模型的加载地址，并将加载地址传递给uniapp框架中的加载控件中；
S203：将h5页面中的文档解析为文档对象模型树；使用编程脚本在unipp框架中的视图层操作文档对象模型树，并通过遍历文档对象模型树运行uniapp中的编程脚本；
S204：调用uniapp框架中预设的类方法将3D模型中的数据传输回视图层进行显示。
优选的，步骤40之后，还包括：
S50：用户点击app应用程序中的3D模型，app应用程序通过加载控件传递3D模型，并在uniapp框架中的服务层对加载控件进行调用；
S60：在uniapp框架中的服务层预设用于调用加载3D模型的类方法；
S70：在视图层中预设一种函数用于返回调用服务层中用于加载3D模型的类方法；
S80：在uniapp框架中的视图层显示最终加载到的3D模型。
优选的，步骤S80，包括：
S801：app应用程序获得3D模型的加载地址，用户在uniapp框架的视图层中手动点击3D模型，3D模型将加载地址传递到uniapp框架的服务层中；
S802：在服务层中，将视图层用于绑定3D模型加载地址的编程脚本进行处理，编程脚本为renderjs；
S803：在完成处理后由服务层改变绑定3D模型的加载地址，当3D模型的加载地址在服务层中发生变化时，renderjs中3D模型的加载地址同步发生变化。
优选的，步骤S803之后，还包括：
S804：renderjs获得3D模型加载地址变化的消息后则调用3D绘图协议中的引擎，引擎为threejs，用于加载3D模型；
S805：判断当前3D模型是否加载成功，并向renderjs返回加载结果；
S806：renderjs获取加载结果，并通过预设的调用方法将加载结果返回到服务层，调用方法中包括两个调用参数，调用方法名作为第一参数以及传递参数作为第二参数；
S807：服务层将获取到的加载结果传递给视图层，若加载成功，则直接在视图层进行显示，若加载失败，则对服务层返回提示信息。
优选的，步骤S30，包括：
S301：构建h5页面渲染逻辑的第一模块类，第一模块类用于对实现加载3D模型的整个屏幕显示界面的封装，功能为管理调度3D模型中包含图层的整个渲染流程，包括图层创建、图层尺寸调整以及图层合成，并将多种图层中的元素进行组合；
S302：构建h5页面渲染逻辑的第二模块类，第二模块类用于对h5页面中的画布标签进行封装，画布标签为canvas；在画布标签的图层中进行图像绘制，获取将h5页面渲染需求进行解析到的指令以及参数信息，调用第二模块类中封装的图像绘制函数，图像绘制函数包括图像绘制方法、矩形复制方法、弧形绘制方法、颜色填充方法以及图像传输方法；
S303：通过调用第一模块类与第二模块类，生成用于h5页面渲染的数据。
优选的，步骤303之后，还包括：
S304：对h5页面图像进行处理，创建自定义协议，用于客户端接收到数据后根据自定义协议的格式解析出操作指令和操作参数；
S305：通过调用自定义协议中的类方法执行操作指令中与数据对应的图像绘制函数，准备执行图像绘制函数进行3D模型的绘制；
S306：判断当前客户端是否支持用于图像绘制的类方法，若是，则创建写入流将操作指令输入到写入流的任务队列中；若否，则创建数据的唯一标识符，将唯一标识符作为操作参数添加到操作指令中，同样输入到任务队列中；
S307：在数据加载完毕后，执行图像绘制函数，开始3D模型的渲染工作。
优选的，步骤S307之后，还包括：
S308：构建图层合成模块，用于在app应用程序中根据页面的自身情况单独执行图层渲染操作，并在渲染操作执行完成后当前页面将渲染图层发送至图层合成模块中；
S309：获取图层合成模块中各个图层的属性信息，将属性信息分为目标区域与背景区域，目标区域作为用于实现加载3D模型的属性信息，背景区域作为剩余需要图层渲染的属性信息；
S310：获取目标区域的所在图层合成为待显示区域，将待显示区域分为横向显示与纵向显示，通过调节待显示区域的尺寸，完成3D模型在app的屏幕上显示为合适大小的图像。
优选的，步骤S310之后，还包括：
S311：用户在app应用程序中点击3D模型，根据用户的动作触发分为第一模式与第二模式，第一模式包括屏幕的横向显示，第二模式包括屏幕的纵向显示；
S312：计算屏幕中待显示区域中的面积与屏幕面积的比例值，并分别判断在第一模式与第二模式下的比例值是否小于预设比值，若是，则不对当前图层进行操作，若不是，则将不符合预设比值的图层作为待更新区域；
S313：在图层合成模块中构建辅助图层，用于对待更新区域中的图层进行矫正，将矫正好的图层重新输入至待显示区域。
优选的，步骤S40，包括：
S401：对3D模型加载的响应时间进行测试，响应时间包括用户触发点击事件，即在点击app应用程序以及h5页面到打开的操作过程作为第一响应时间，还包括用户在使用app应用程序以及登录h5页面的过程中获取响应的时间作为第二响应时间；
S402：在第一响应时间中，从用户触发点击事件开始，客户端以及移动端将即将打开的消息发送给服务器，服务器将客户端的主机信息以及移动端的型号信息进行发送请求远程连接，发送结束后将结果返回；
S403：在第二响应时间中，客户端以及移动端获取结果返回后的数据并进行解析处理；
S404：多次测试第一响应时间与第二响应时间，根据响应结果计算响应速度并判断响应时间的平均值是否在预设的范围内。
与现有技术相比，本发明具有以下优点：
本发明提供一种同时支持app、h5加载3D模型的方法，通过使用uniapp同时支持app、h5加载3D模型的方法，将app和h5的功能进行融合，实现了在两个环境中共享和复用3D模型的能力，以确保在不同平台和网络下实现流畅进行3D模型的展示。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例中一种同时支持app、h5加载3D模型的方法的步骤图；
图2为本发明实施例中3D模型在app应用程序中的加载流程图；
图3为本发明实施例中对3D模型进行加载的响应时间测试的步骤图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
参照图1，本发明实施例提供了一种同时支持app、h5加载3D模型的方法，包括：
S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；
S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；
S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；
S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化。
上述技术方案的工作原理为，采实施例采用的方案是，通过创建uniapp项目，使用uniapp开发框架创建程序项目，用于跨平台即同时加载3D模型的app和h5页面，在uniapp中集成3D模型加载库，用于在uniapp中集成支持3D模型记载和展示的库，其中用于加载和展示的库为threejs。定义数据的交互格式，用于在app和h5之间传递3D模型相关的数据，例如3D模型的文件路径，创建日期等。定义数据传输和记载机制，用于实现高效的数据传输和加载机制，以确保在不同平台和网络条件下快速加载和展示3D模型，通过使用网络请求、本地缓存等技术提高加载速度和用户体验。根据用户的需求开发app和h5的界面，其中包括3D模型的展示区域，交互控制按钮等。在uniapp项目中编写统一的渲染逻辑，根据传递的3D模型数据，在app和h5中实现一致的渲染效果。最后根据uniapp的跨平台特性，在不同的设备上进行测试和优化，以确保在各种环境下的兼容性和稳定性。
上述技术方案的有益效果为：采用本实施例提供的方案，通过使用uniapp同时支持app、h5加载3D模型的方法，将app和h5的功能进行融合，实现了在两个环境中共享和复用3D模型的能力，以确保在不同平台和网络下实现流畅进行3D模型的展示。
在另一实施例中，步骤20，包括：
S201：在uniapp框架的服务器端上传3D模型并生成与3D模型对应的加载地址；
S202：app应用程序获取3D模型的加载地址，并将加载地址传递给uniapp框架中的加载控件中；
S203：将h5页面中的文档解析为文档对象模型树；使用编程脚本在unipp框架中的视图层操作文档对象模型树，并通过遍历文档对象模型树运行uniapp中的编程脚本；
S204：调用uniapp框架中预设的类方法将3D模型中的数据传输回视图层进行显示。
上述技术方案的工作原理为：本实施例采用的方案是，uniapp是一种使用vue.js开发所有前端应用的框架，通过开发者编写一套代码，并发布到应用软件app以及网站页面等多个平台，3D模型是用三维软件建造的立体模型，包括各种建筑、人物、植被、机械等，也可以包括玩具和电脑模型领域。
renderjs是一个运行在视图层的JavaScript，它可以大幅度降低uniapp框架中逻辑层和现实层的通迅损耗，提高性能视图的交互能力，在视图层操作dom即文档对象模型树，运行for web的js库。Threejs是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能，主要用户3D模型的显示。
参照图2，在另一实施例中，步骤40之后，还包括：
S50：用户点击app应用程序中的3D模型，app应用程序通过加载控件传递3D模型，并在uniapp框架中的服务层对加载控件进行调用；
S60：在uniapp框架中的服务层预设用于调用加载3D模型的类方法；
S70：在视图层中预设一种函数用于返回调用服务层中用于加载3D模型的类方法；
S80：在uniapp框架中的视图层显示最终加载到的3D模型。
在另一实施例中，步骤S80，包括：
S801：app应用程序获得3D模型的加载地址，用户在uniapp框架的视图层中手动点击3D模型，3D模型将加载地址传递到uniapp框架的服务层中；
S802：在服务层中，将视图层用于绑定3D模型加载地址的编程脚本进行处理，编程脚本为renderjs；
S803：在完成处理后由服务层改变绑定3D模型的加载地址，当3D模型的加载地址在服务层中发生变化时，renderjs中3D模型的加载地址同步发生变化。
在另一实施例中，步骤S83之后，还包括：
S804：renderjs获得3D模型加载地址变化的消息后则调用3D绘图协议中的引擎，引擎为threejs，用于加载3D模型；
S805：判断当前3D模型是否加载成功，并向renderjs返回加载结果；
S806：renderjs获取加载结果，并通过预设的调用方法将加载结果返回到服务层，调用方法中包括两个调用参数，调用方法名作为第一参数以及传递参数作为第二参数；
S807：服务层将获取到的加载结果传递给视图层，若加载成功，则直接在视图层进行显示，若加载失败，则对服务层返回提示信息。
上述技术方案的工作原理为：本实施例采用的方案是，首先通过在App中加载3D模型的加载地址，用于在视图层即template层中手动点击3D模型的加载路径，传递到服务层即service层中，在service层中，使用服务层中的模块即module绑定renderjs，通过改变绑定3D模型路径，当3D模型的加载路径在service层中发生改变时，renderjs中的3D模型加载路径同时发生变化。Renderjs重新获取3D模型的路径变化，使用后调用threejs加载3d模型的方法，rendersjs层获得3D模型加载成功或者失败的结果后则可以通过this.$ownerInstance.callMethod()方法调用service中的方法将结果传递到service层，其中this.$ownerInstance.callMethod()方法中第一个参数是方法名，第二个参数是用于件数据传过去的参数。
上述技术方案的有益效果为：采用本实施例提供的方案，通过使用threejs加载引擎，并使用renderjs获取加载结果，用以将获取到的加载结果进行传递，完成3D模型的展示。
在另一实施例中，步骤S30，包括：
S301：构建h5页面渲染逻辑的第一模块类，第一模块类用于对实现加载3D模型的整个屏幕显示界面的封装，功能为管理调度3D模型中包含图层的整个渲染流程，包括图层创建、图层尺寸调整以及图层合成，并将多种图层中的元素进行组合；
S302：构建h5页面渲染逻辑的第二模块类，第二模块类用于对h5页面中的画布标签进行封装，画布标签为canvas；在画布标签的图层中进行图像绘制，获取将h5页面渲染需求进行解析到的指令以及参数信息，调用第二模块类中封装的图像绘制函数，图像绘制函数包括图像绘制方法、矩形复制方法、弧形绘制方法、颜色填充方法以及图像传输方法；
S303：通过调用第一模块类与第二模块类，生成用于h5页面渲染的数据。
上述技术方案的工作原理为：本实施例采用的方案是，界面渲染为对客户端进行显示，其中渲染逻辑包含客户端的的两个核心类，其实现依赖的第一模块类和实现绘制的第二模块类。第一模块类是对整个屏幕显示的一个抽象封装，主要功能包括管理调度整个渲染流程、图层的创建、图层尺存调整重置以及图层合成。第一模块类中的tasks用来存储所有待定的任务队列，使用getDefaultFloor()方法用于返回默认层，这是所有层的祖先层层级的index为0，其它层可以基于这个层来创建；getCursorFloor()用于方法返回光标层，存在与其他所有层之上；通过调用createFloor()来创建一个新的层，父级元素默认为defaultFloor，但可以移动到其他任何层。第二模块类中包含多个图层，并通过调用combinationFloor()方法将整个画布的元素以及其子元素组合起来。第二模块类类是对h5页面中Canvas对象的封装，在图层中进行图像的绘制，根据Client解析得到的指令以及参数信息，调用第二模块类中封装的各种绘制函数，主要包括图像绘制drawImage()方法、矩形复制copy()法，弧形绘制drawArc()、颜色填充fillColor()、矩形图像传输transfer()方法等，并在compositeOperationMap对象中定义了通道掩码和h5页面绘图操作的映射，在第二模块类中创建全局canvas对象。
上述技术方案的有益效果为：采用本实施例提供的方案，通过第一模块类与第二模块类的构建，实现h5页面对3D模型的页面渲染，使用户的体验更加人性化。
在另一实施例中，步骤303之后，还包括：
S304：对h5页面图像进行处理，创建自定义协议，用于客户端接收到数据后根据自定义协议的格式解析出操作指令和操作参数；
S305：通过调用自定义协议中的类方法执行操作指令中与数据对应的图像绘制函数，准备执行图像绘制函数进行3D模型的绘制；
S306：判断当前客户端是否支持用于图像绘制的类方法，若是，则创建写入流将操作指令输入到写入流的任务队列中；若否，则创建数据的唯一标识符，将唯一标识符作为操作参数添加到操作指令中，同样输入到任务队列中；
S307：在数据加载完毕后，执行图像绘制函数，开始3D模型的渲染工作。
上述技术方案的工作原理为：本实施例采用的方案是，客户端对接收到的数据通过设定一个自定义协议，并根据自定义协议的格式解析出指令操作和操作参数，通过调用自定义协议中的类方法执行指令操纵中与数据对应的函数。创建用于读取数据中字节序列的输入流stream，其中数据包含具体的图像数据，并通过调用stream.online方法读取图像数据并将所有数据流合并。调用第一模块类中的类方法准备图像的绘制，创建写入流，并根据写入流将处理后的数据传到第一模块类中的函数进行图像的绘制。判断客户端是否支持用于图像绘制的类方法，若支持，从写入流中加载3D模型，并将绘制的回调函数添加到写入流的任务队列中。若不支持用于图像绘制的方法类，则创建数据的唯一标识符，重新创建新的图像对象将生成的唯一标识符添加到图像的操作指令的属性上，并同样将操作指令添加到任务队列中，当数据加载完毕后，只执行图像绘制函数，开始图像的渲染。
上述技术方案的有益效果为：采用本实施例提供的方案，通过创建图像的操作指令与图像绘制函数，实现了自定义协议的解析、封装，最终将3D模型图像显示在客户端的页面上。
在另一实施例中，步骤S307之后，还包括：
S308：构建图层合成模块，用于在app应用程序中根据页面的自身情况单独执行图层渲染操作，并在渲染操作执行完成后当前页面将渲染图层发送至图层合成模块中；
S309：获取图层合成模块中各个图层的属性信息，将属性信息分为目标区域与背景区域，目标区域作为用于实现加载3D模型的属性信息，背景区域作为剩余需要图层渲染的属性信息；
S310：获取目标区域的所在图层合成为待显示区域，将待显示区域分为横向显示与纵向显示，通过调节待显示区域的尺寸，完成3D模型在app的屏幕上显示为合适大小的图像。
在另一实施例中，步骤310之后，还包括：
S311：用户在app应用程序中点击3D模型，根据用户的动作触发分为第一模式与第二模式，第一模式包括屏幕的横向显示，第二模式包括屏幕的纵向显示；
S312：计算屏幕中待显示区域中的面积与屏幕面积的比例值，并分别判断在第一模式与第二模式下的比例值是否小于预设比值，若是，则不对当前图层进行操作，若不是，则将不符合预设比值的图层作为待更新区域；
S313：在图层合成模块中构建辅助图层，用于对待更新区域中的图层进行矫正，将矫正好的图层重新输入至待显示区域。
上述技术方案的工作原理为：本实施例采用的方案是，在h5页面的图像渲染工作完成后，需要同时对app进行3D模型图像的渲染，由于图像中包含若干个图层，通过对图层的处理完成渲染工作，构建图层合成模块，获取图层合成模块中各个图层的属性信息，并将属性信息分为目标区域与背景区域，由于主要工作是对3D模型渲染，所以将目标区域用于抓取图像中包含3D模型的部分。背景区域则作为用于渲染除3D模型外剩余部分的属性信息。将未渲染的部分作为待显示区域。由于在app中，移动端在显示过程中分为横向和纵向，所以需要分别设计屏幕尺寸的横向与纵向现实，通过调节待显示区域的尺寸，使3D模型的图像以合适的大小显示在app的应用程序中。
在app的图像显示中，用户在app中点击3D模型的同时，根据用户的点击触发操作将操作模型分为第一模式与第二模式分别代表屏幕的横向显示与纵向显示。计算屏幕中待显示区域的面积与屏幕面积的比例值，根据比例值判断当前图层是否合适以及是否需要更新。
上述技术方案的有益效果为：采用本实施例提供的方案，构建图层合成模块对app中3D模型的图像进行渲染，并根据横向与纵向不同的显示方式对图像进行调整操作，使app的显示模式更加人性化，提高了用户的体验。
参照图3，在另一实施例中，步骤S40，包括：
S401：对3D模型加载的响应时间进行测试，响应时间包括用户触发点击事件，即在点击app应用程序以及h5页面到打开的操作过程作为第一响应时间，还包括用户在使用app应用程序以及登录h5页面的过程中获取响应的时间作为第二响应时间；
S402：在第一响应时间中，从用户触发点击事件开始，客户端以及移动端将即将打开的消息发送给服务器，服务器将客户端的主机信息以及移动端的型号信息进行发送请求远程连接，发送结束后将结果返回；
S403：在第二响应时间中，客户端以及移动端获取结果返回后的数据并进行解析处理；
S404：多次测试第一响应时间与第二响应时间，根据响应结果计算响应速度并判断响应时间的平均值是否在预设的范围内。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (6)
1.一种同时支持app、h5加载3D模型的方法，其特征在于，包括：
S10：创建uniapp项目，通过搭建uniapp框架创建一个跨平台的程序项目，跨平台包括app应用程序和h5页面；
S20：集成3D模型加载库，在uniapp框架中集成支持3D模型的加载展示库，加载展示库为threejs；定义数据加载机制，并使uniapp框架利用一种脚本语言在app应用程序中加载3D模型；
S30：根据用户需求开发app应用程序和h5页面，并在uniapp框架中编写渲染逻辑，实现统一的渲染效果；
S40：使用移动设备和浏览器对数据加载机制进行测试，并根据测试结果进行数据优化；
步骤S30，包括：
S301：构建h5页面渲染逻辑的第一模块类，第一模块类用于对实现加载3D模型的整个屏幕显示界面的封装，功能为管理调度3D模型中包含图层的整个渲染流程，包括图层创建、图层尺寸调整以及图层合成，并将多种图层中的元素进行组合；
S302：构建h5页面渲染逻辑的第二模块类，第二模块类用于对h5页面中的画布标签进行封装，画布标签为canvas；在画布标签的图层中进行图像绘制，获取将h5页面渲染需求进行解析到的指令以及参数信息，调用第二模块类中封装的图像绘制函数，图像绘制函数包括图像绘制方法、矩形复制方法、弧形绘制方法、颜色填充方法以及图像传输方法；
S303：通过调用第一模块类与第二模块类，生成用于h5页面渲染的数据；
步骤303之后，还包括：
S304：对h5页面图像进行处理，创建自定义协议，用于客户端接收到数据后根据自定义协议的格式解析出操作指令和操作参数；
S305：通过调用自定义协议中的类方法执行操作指令中与数据对应的图像绘制函数，准备执行图像绘制函数进行3D模型的绘制；
S306：判断当前客户端是否支持用于图像绘制的类方法，若是，则创建写入流将操作指令输入到写入流的任务队列中；若否，则创建数据的唯一标识符，将唯一标识符作为操作参数添加到操作指令中，同样输入到任务队列中；
S307：在数据加载完毕后，执行图像绘制函数，开始3D模型的渲染工作；
步骤S307之后，还包括：
S308：构建图层合成模块，用于在app应用程序中根据页面的自身情况单独执行图层渲染操作，并在渲染操作执行完成后，当前页面将渲染图层发送至图层合成模块中；
S309：获取图层合成模块中各个图层的属性信息，将属性信息分为目标区域与背景区域，目标区域作为用于实现加载3D模型的属性信息，背景区域作为剩余需要图层渲染的属性信息；
S310：获取目标区域的所在图层合成为待显示区域，将待显示区域分为横向显示与纵向显示，通过调节待显示区域的尺寸，完成3D模型在app的屏幕上显示为合适大小的图像；
步骤S310之后，还包括：
S311：用户在app应用程序中点击3D模型，根据用户的动作触发分为第一模式与第二模式，第一模式包括屏幕的横向显示，第二模式包括屏幕的纵向显示；
S312：计算屏幕中待显示区域中的面积与屏幕面积的比例值，并分别判断在第一模式与第二模式下的比例值是否小于预设比值，若是，则不对当前图层进行操作，若不是，则将不符合预设比值的图层作为待更新区域；
S313：在图层合成模块中构建辅助图层，用于对待更新区域中的图层进行矫正，将矫正好的图层重新输入至待显示区域。
2.根据权利要求1所述的一种同时支持app、h5加载3D模型的方法，其特征在于，步骤20，包括：
S201：在uniapp框架的服务器端上传3D模型并生成与3D模型对应的加载地址；
S202：app应用程序获取3D模型的加载地址，并将加载地址传递给uniapp框架中的加载控件中；
S203：将h5页面中的文档解析为文档对象模型树；使用编程脚本在uniapp框架中的视图层操作文档对象模型树，并通过遍历文档对象模型树运行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模型的方法，其特征在于，步骤S40，包括：
S401：对3D模型加载的响应时间进行测试，响应时间包括用户触发点击事件，即在点击app应用程序以及h5页面到打开的操作过程作为第一响应时间，还包括用户在使用app应用程序以及登录h5页面的过程中获取响应的时间作为第二响应时间；
S402：在第一响应时间中，从用户触发点击事件开始，客户端以及移动端将即将打开的消息发送给服务器，服务器将客户端的主机信息以及移动端的型号信息进行发送请求远程连接，发送结束后将结果返回；
S403：在第二响应时间中，客户端以及移动端获取结果返回后的数据并进行解析处理；
S404：多次测试第一响应时间与第二响应时间，根据响应结果计算响应速度并判断响应时间的平均值是否在预设的范围内。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310716584.1A CN116701807B (zh) | 2023-06-16 | 2023-06-16 | 一种同时支持app、h5加载3D模型的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310716584.1A CN116701807B (zh) | 2023-06-16 | 2023-06-16 | 一种同时支持app、h5加载3D模型的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116701807A CN116701807A (zh) | 2023-09-05 |
| CN116701807B true CN116701807B (zh) | 2024-03-15 |
Family
ID=87835451
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310716584.1A Active CN116701807B (zh) | 2023-06-16 | 2023-06-16 | 一种同时支持app、h5加载3D模型的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116701807B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113360200A (zh) * | 2020-03-05 | 2021-09-07 | 北京沃东天骏信息技术有限公司 | 一种目标程序植入页面运行的方法和装置 |
| CN114067048A (zh) * | 2021-11-10 | 2022-02-18 | 中国人民解放军空军工程大学 | 物资转运可视化智能系统及搭建方法 |
| CN114077423A (zh) * | 2021-10-18 | 2022-02-22 | 青岛民航凯亚系统集成有限公司 | 基于移动跨平台的机场app开发容器架构 |
| CN115543318A (zh) * | 2022-10-28 | 2022-12-30 | 天翼电子商务有限公司 | 基于vue开发的H5应用快速成型为多端应用实现方法 |
| CN115617337A (zh) * | 2022-10-21 | 2023-01-17 | 圣名科技(广州)有限责任公司 | 基于目标框架显示模型方法和装置、电子设备和存储介质 |
-
2023
- 2023-06-16 CN CN202310716584.1A patent/CN116701807B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113360200A (zh) * | 2020-03-05 | 2021-09-07 | 北京沃东天骏信息技术有限公司 | 一种目标程序植入页面运行的方法和装置 |
| CN114077423A (zh) * | 2021-10-18 | 2022-02-22 | 青岛民航凯亚系统集成有限公司 | 基于移动跨平台的机场app开发容器架构 |
| CN114067048A (zh) * | 2021-11-10 | 2022-02-18 | 中国人民解放军空军工程大学 | 物资转运可视化智能系统及搭建方法 |
| CN115617337A (zh) * | 2022-10-21 | 2023-01-17 | 圣名科技(广州)有限责任公司 | 基于目标框架显示模型方法和装置、电子设备和存储介质 |
| CN115543318A (zh) * | 2022-10-28 | 2022-12-30 | 天翼电子商务有限公司 | 基于vue开发的H5应用快速成型为多端应用实现方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116701807A (zh) | 2023-09-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107992301B (zh) | 用户界面实现方法、客户端及存储介质 | |
| JP5306429B2 (ja) | デジタルドキュメント処理のための方法 | |
| US7237227B2 (en) | Application user interface template with free-form layout | |
| US8166396B2 (en) | User interface rendering | |
| CN110908712A (zh) | 移动端跨平台的数据处理方法和设备 | |
| KR101416100B1 (ko) | 하이브리드 웹 어플리케이션에서 자바스크립트 연동을 위한 인터페이스 | |
| KR20180027031A (ko) | 멀티 플랫폼을 지원하는 앱 저작 서버, 장치 및 방법 | |
| KR20130047071A (ko) | 모바일용 혼합현실 어플리케이션 개발 장치 및 그 방법 | |
| CN113010170A (zh) | 一种基于Vue3组件的页面渲染方法、装置、介质及电子设备 | |
| CN105824517A (zh) | 一种桌面的实现方法和装置 | |
| KR101892699B1 (ko) | 앱 개발을 위한 통합 개발 환경을 제공하는 앱 저작 장치 및 방법 | |
| CN116701807B (zh) | 一种同时支持app、h5加载3D模型的方法 | |
| CN110888634B (zh) | 游戏落地页生成方法、装置、计算机设备和存储介质 | |
| US10042521B1 (en) | Emulation of control resources for use with converted content pages | |
| CN107133046B (zh) | 页面搭建方法、装置和电子终端 | |
| CN115994517A (zh) | 信息处理方法、装置、存储介质、设备及程序产品 | |
| CN112379863B (zh) | 跨浏览器和小程序的webGL开发方法、装置和计算机设备 | |
| CN115586893A (zh) | 一种跨平台软件开发系统及方法 | |
| Mikkonen et al. | Lively for Qt: A platform for mobile web applications | |
| CN114185845A (zh) | 一种文件管理方法、装置、计算机设备及存储介质 | |
| US20130254282A1 (en) | Propagating user experience state information | |
| Nyrhinen et al. | Lively mashups for mobile devices | |
| CN116595284B (zh) | 网页系统运行方法、装置、设备、存储介质和程序 | |
| CN116112573B (zh) | 终端界面转换方法、装置、设备、存储介质和程序产品 | |
| Hui et al. | Design and Implement a Cartographic Client Application For Mobile Devices using SVG Tiny and J2ME |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |