CN112612627A - 一种web端实现三维互动的方法 - Google Patents
一种web端实现三维互动的方法 Download PDFInfo
- Publication number
- CN112612627A CN112612627A CN202011579981.1A CN202011579981A CN112612627A CN 112612627 A CN112612627 A CN 112612627A CN 202011579981 A CN202011579981 A CN 202011579981A CN 112612627 A CN112612627 A CN 112612627A
- Authority
- CN
- China
- Prior art keywords
- dimensional
- data
- web end
- realizing
- web
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 230000003993 interaction Effects 0.000 title claims abstract description 22
- 238000012800 visualization Methods 0.000 claims abstract description 21
- 238000004891 communication Methods 0.000 claims abstract description 18
- 230000000007 visual effect Effects 0.000 claims abstract description 11
- 238000013079 data visualisation Methods 0.000 claims abstract description 7
- 238000009877 rendering Methods 0.000 claims description 11
- 238000012544 monitoring process Methods 0.000 claims description 9
- 238000001914 filtration Methods 0.000 claims description 4
- 238000003032 molecular docking Methods 0.000 claims description 2
- 210000001503 joint Anatomy 0.000 claims 1
- 230000005540 biological transmission Effects 0.000 abstract description 4
- 230000002452 interceptive effect Effects 0.000 abstract description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 5
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000004880 explosion Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供一种web端实现三维互动的方法，主要步骤如下：第一步：创建web端三维模块。第二步：创建可视化模块。第三步：对接数据API接口，完成数据的可视化展示。第四步：通过WebSocket接口完成前后端信号通信。本发明能够实现web端的三维可视化项目的快速互动通信，提高了通信传输效率和质量，对常见的页面元素的抽象，提供了更丰富、灵活的配置方式，实现了具备较高可读性、可编程、可批量操作、高效的可视化数据可视化模块的配置技术方案，使得三维相关的应用程序智能在web端流畅运行，更好的呈现三维应用，能够突破浏览器的限制，适应性更强，达到快速进行三维可视化互动的目的。
Description
技术领域
本发明涉及计算机领域，具体为一种web端实现三维互动的方法。
背景技术
伴随着web开发技术的蓬勃发展，越来越多的应用向着web端转移。很早以前，三维相关的应用程序智能在桌面端运行，web端限制于标准、浏览器性能等原因，一直不能很好地呈现三维应用。随着WebGL标准的确立以及推广，越来越多的三维应用可以在web端呈现出不输于桌面端的效果。三维可视化也随着WebGL的发展推广得到了快速发展，但是Web端实现三维可视化互动的速度还有待提高，同时需要进一步提高传输效率和质量。
发明内容
本发明目的在于提供一种web端实现三维互动的方法，解决web端的三维可视化项目的快速互动通信的问题。
为达成上述目的，本发明提出如下技术方案：一种web端实现三维互动的方法，包括如下步骤：
第一步：创建web端三维模块，所述web端三维模块创立场景、相机、渲染方法，所述web端三维模块展示具体物体。
第二步：创建可视化模块，通过配置引擎，设置数据可视化模块的页面元素的内容及布局，所述页面元素至少包括过滤器和图表，所述过滤器用于设置数据过滤条件，所述图表用于呈现数据包含的各类指标，通过渲染引擎按照所述页面元素的内容，确定各个图表对应的过滤器集合，并分别针对各个图表执行以下操作：按照图表对应的过滤器集合表征数据过滤条件，从所述至少两种数据源获取相应的数据，将所述数据包含的各类指标填写至所述图表中，通过所述渲染引擎按照所述页面元素的布局，对各个页面元素进行渲染，生成相应的数据可视化模块。
第三步：对接数据API接口，完成数据的可视化展示。
第四步：通过WebSocket接口完成前后端信号通信。
进一步的，在本发明中，所述第一步中的web端三维模块包括已封装的API。
进一步的，在本发明中，所述API包括Three.js，通过Three.js创建三维应用程序。
进一步的，在本发明中，所述Three.js创建三维应用程序的步骤如下：
1.1：调用new Scene方法，创立场景；
1.2：调用PerspectiveCamera创立相机；
1.3：调用WebGLRenderer创立渲染方法；
1.4：调用Mesh方法创建三维展示的具体物体。
进一步的，在本发明中，通过echarts库创建第二步中的echarts库步骤如下：
2.1：调用echarts.init方法，完成可视化库的初始化，得到可视化实例；
2.2：设置可视化的相关配置option；
2.3：调用可视化实例的setOption方法，传入上一步的option作为参。
进一步的，在本发明中，通过http协议通信完成第三步，具体步骤如下：
3.1：安装axios库，快速实现业务数据的api请求；
3.2：对接业务数据的api，得到业务数据；
3.3：将业务数据更新第二步的option参数的data部分；
3.4：调用第二步实例的setOption方法，刷新数据。
进一步的，在本发明中，基于Node.js的后台服务express框端完成第四步，具体步骤如下：
4.1：安装express-ws，并创建WebSocket服务，监听message方法；
4.2：在web端建立WebSocket实例，设置onmessage方法用来监听服务端消息；
4.3根据业务需要，客户端、服务端各自调用WebSocket实例的send方法发送消息；
4.4前后端的messsage监听方法收到消息后，各自根据业务需要解析，完成前后端互动。
有益效果，本申请的技术方案具备如下技术效果：
本发明能够实现web端的三维可视化项目的快速互动通信，提高了通信传输效率和质量，对常见的页面元素的抽象，提供了更丰富、灵活的配置方式，实现了具备较高可读性、可编程、可批量操作、高效的可视化数据可视化模块的配置技术方案，使得三维相关的应用程序智能在web端流畅运行，更好的呈现三维应用，能够突破浏览器的限制，适应性更强，达到快速进行三维可视化互动的目的。
应当理解，前述构思以及在下面更加详细地描述的额外构思的所有组合只要在这样的构思不相互矛盾的情况下都可以被视为本公开的发明主题的一部分。
结合附图从下面的描述中可以更加全面地理解本发明教导的前述和其他方面、实施例和特征。本发明的其他附加方面例如示例性实施方式的特征和/或有益效果将在下面的描述中显见，或通过根据本发明教导的具体实施方式的实践中得知。
附图说明
附图不意在按比例绘制。在附图中，在各个图中示出的每个相同或近似相同的组成部分可以用相同的标号表示。为了清晰起见，在每个图中，并非每个组成部分均被标记。现在，将通过例子并参考附图来描述本发明的各个方面的实施例，其中：
图1为本发明步骤流程示意图。
具体实施方式
为了更了解本发明的技术内容，特举具体实施例并配合所附图式说明如下。在本公开中参照附图来描述本发明的各方面，附图中示出了许多说明的实施例。本公开的实施例不必定意在包括本发明的所有方面。应当理解，上面介绍的多种构思和实施例，以及下面更加详细地描述的那些构思和实施方式可以以很多方式中任意一种来实施，这是因为本发明所公开的构思和实施例并不限于任何实施方式。另外，本发明公开的一些方面可以单独使用，或者与本发明公开的其他方面的任何适当组合来使用。
一种web端实现三维互动的方法，如图1所示，具体包含以下步骤：
第一步：创建web端三维模块。
随着WebGL标准的确立和推广，越来越多的前端三维库基于WebGL进行了拓展，并提供了更多已封装友好的API,Three.js即是其中一个。以Three.js为例，创建三维应用程序。
1.调用new Scene方法，创立场景。
2.调用PerspectiveCamera创立相机
3.调用WebGLRenderer创立渲染方法
4.调用Mesh方法创建三维展示的具体物体。
第二步：创建可视化模块。
创建可视化的方法多种多样，本文以常用的echarts库为例说明如下：
1.调用echarts.init方法，完成可视化库的初始化，得到可视化实例。
2.设置可视化的相关配置option
3.调用可视化实例的setOption方法，传入上一步的option作为参数。
第三步：对接数据API接口，完成数据的可视化展示。
本步骤主要对接业务系统，完成真实业务数据的可视化展示。下面以场景的http协议通信为例：
1.安装axios库，快速实现业务数据的api请求。
2.对接业务数据的api，得到业务数据。
3.将业务数据更新第二步的option参数的data部分。
4.调用第二步实例的setOption方法，刷新数据。
第四步：通过WebSocket接口完成前后端信号通信。
本步骤主要是创建WebSocket接收服务端中转的相关信息，实现前后端互动。以基于Node.js的后台服务express框端为例：
1.安装express-ws，并创建WebSocket服务，监听message方法。
2.在web端建立WebSocket实例，设置onmessage方法用来监听服务端消息。
3.根据业务需要，客户端、服务端各自调用WebSocket实例的send方法发送消息。
前后端的messsage监听方法收到消息后，各自根据业务需要解析，完成前后端互动。
本发明能够实现web端的三维可视化项目的快速互动通信，提高了通信传输效率和质量，对常见的页面元素的抽象，提供了更丰富、灵活的配置方式，实现了具备较高可读性、可编程、可批量操作、高效的可视化数据可视化模块的配置技术方案，使得三维相关的应用程序智能在web端流畅运行，更好的呈现三维应用，能够突破浏览器的限制，适应性更强，达到快速进行三维可视化互动的目的。
虽然本发明已以较佳实施例揭露如上，然其并非用以限定本发明。本发明所属技术领域中具有通常知识者，在不脱离本发明的精神和范围内，当可作各种的更动与润饰。因此，本发明的保护范围当视权利要求书所界定者为准。
Claims (7)
1.一种web端实现三维互动的方法，其特征在于：包括如下步骤：
第一步：创建web端三维模块，所述web端三维模块创立场景、相机、渲染方法，所述web端三维模块展示具体物体；
第二步：创建可视化模块，通过配置引擎，设置数据可视化模块的页面元素的内容及布局，所述页面元素至少包括过滤器和图表，所述过滤器用于设置数据过滤条件，所述图表用于呈现数据包含的各类指标，通过渲染引擎按照所述页面元素的内容，确定各个图表对应的过滤器集合，并分别针对各个图表执行以下操作：按照图表对应的过滤器集合表征数据过滤条件，从所述至少两种数据源获取相应的数据，将所述数据包含的各类指标填写至所述图表中，通过所述渲染引擎按照所述页面元素的布局，对各个页面元素进行渲染，生成相应的数据可视化模块；
第三步：对接数据API接口，完成数据的可视化展示；
第四步：通过WebSocket接口完成前后端信号通信。
2.根据权利要求1所述的一种web端实现三维互动的方法，其特征在于：所述第一步中的web端三维模块包括已封装的API。
3.根据权利要求2所述的一种web端实现三维互动的方法，其特征在于：所述API包括Three.js，通过Three.js创建三维应用程序。
4.根据权利要求3所述的一种web端实现三维互动的方法，其特征在于：所述Three.js创建三维应用程序的步骤如下：
1.1：调用new Scene方法，创立场景；
1.2：调用PerspectiveCamera创立相机；
1.3：调用WebGLRenderer创立渲染方法；
1.4：调用Mesh方法创建三维展示的具体物体。
5.根据权利要求1所述的一种web端实现三维互动的方法，其特征在于：通过echarts库创建第二步中的echarts库步骤如下：
2.1：调用echarts.init方法，完成可视化库的初始化，得到可视化实例；
2.2：设置可视化的相关配置option；
2.3：调用可视化实例的setOption方法，传入上一步的option作为参。
6.根据权利要求1所述的一种web端实现三维互动的方法，其特征在于：通过http协议通信完成第三步，具体步骤如下：
3.1：安装axios库，快速实现业务数据的api请求；
3.2：对接业务数据的api，得到业务数据；
3.3：将业务数据更新第二步的option参数的data部分；
3.4：调用第二步实例的setOption方法，刷新数据。
7.根据权利要求1所述的一种web端实现三维互动的方法，其特征在于：基于Node.js的后台服务express框端完成第四步，具体步骤如下：
4.1：安装express-ws，并创建WebSocket服务，监听message方法；
4.2：在web端建立WebSocket实例，设置onmessage方法用来监听服务端消息；
4.3根据业务需要，客户端、服务端各自调用WebSocket实例的send方法发送消息；
4.4前后端的messsage监听方法收到消息后，各自根据业务需要解析，完成前后端互动。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011579981.1A CN112612627B (zh) | 2020-12-28 | 2020-12-28 | 一种web端实现三维互动的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011579981.1A CN112612627B (zh) | 2020-12-28 | 2020-12-28 | 一种web端实现三维互动的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112612627A true CN112612627A (zh) | 2021-04-06 |
| CN112612627B CN112612627B (zh) | 2024-04-05 |
Family
ID=75248276
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011579981.1A Active CN112612627B (zh) | 2020-12-28 | 2020-12-28 | 一种web端实现三维互动的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112612627B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107833105A (zh) * | 2017-11-14 | 2018-03-23 | 青岛理工大学 | 一种基于楼宇建筑信息模型的商场可视化租赁管理方法及系统 |
| CN109271149A (zh) * | 2018-09-29 | 2019-01-25 | 四川长虹电器股份有限公司 | 一种架构单页应用程序的方法 |
| CN110297442A (zh) * | 2018-09-30 | 2019-10-01 | 湖北工业大学 | 一种基于WebSocket的研讨过程控制系统及方法 |
| CN111324837A (zh) * | 2020-02-17 | 2020-06-23 | 深圳震有科技股份有限公司 | web前端基于GIS系统的三维图表可视化方法及装置 |
| CN111858102A (zh) * | 2020-07-30 | 2020-10-30 | 山东超越数控电子股份有限公司 | 一种基于vue和axios的Restful API请求方法及装置 |
| CN111880771A (zh) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | 一种数据可视化模块的生成方法及装置 |
-
2020
- 2020-12-28 CN CN202011579981.1A patent/CN112612627B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107833105A (zh) * | 2017-11-14 | 2018-03-23 | 青岛理工大学 | 一种基于楼宇建筑信息模型的商场可视化租赁管理方法及系统 |
| CN109271149A (zh) * | 2018-09-29 | 2019-01-25 | 四川长虹电器股份有限公司 | 一种架构单页应用程序的方法 |
| CN110297442A (zh) * | 2018-09-30 | 2019-10-01 | 湖北工业大学 | 一种基于WebSocket的研讨过程控制系统及方法 |
| CN111324837A (zh) * | 2020-02-17 | 2020-06-23 | 深圳震有科技股份有限公司 | web前端基于GIS系统的三维图表可视化方法及装置 |
| CN111880771A (zh) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | 一种数据可视化模块的生成方法及装置 |
| CN111858102A (zh) * | 2020-07-30 | 2020-10-30 | 山东超越数控电子股份有限公司 | 一种基于vue和axios的Restful API请求方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 王海涛: "BIM模型网页端可视化研究", 《水利规划与设计》, no. 3, pages 98 - 101 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112612627B (zh) | 2024-04-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108958736B (zh) | 页面生成方法、装置、电子设备及计算机可读介质 | |
| US10880227B2 (en) | Apparatus, hybrid apparatus, and method for network resource access | |
| CN111611518B (zh) | 基于Html5的可视化展示页面自动发布方法及系统 | |
| CN109918604A (zh) | 网页绘图方法、装置、设备及存储介质 | |
| CN111399729A (zh) | 图像的绘制方法、装置、可读介质和电子设备 | |
| CN109634599B (zh) | 页面视图的显示方法、装置、设备及存储介质 | |
| CN109558323B (zh) | 用于调试页面的系统、方法和装置 | |
| CN108038212B (zh) | 一种数据交互方法、装置、系统、设备和存储介质 | |
| CN110675465B (zh) | 用于生成图像的方法和装置 | |
| CN109582317B (zh) | 用于调试寄宿应用的方法和装置 | |
| CN109949395A (zh) | 热力图渲染方法及装置 | |
| CN115600629B (zh) | 车辆信息二维码生成方法、电子设备和计算机可读介质 | |
| CN112307403A (zh) | 页面渲染方法、装置、存储介质以及终端 | |
| CN113691531B (zh) | 基于WebSocket协议的数据传输方法及系统、设备及存储介质 | |
| CN115796963A (zh) | 基于时间-空间关系的mr内容定位 | |
| CN114168853A (zh) | 一种数据可视化展示方法、装置、介质及电子设备 | |
| CN115809056B (zh) | 组件复用实现方法、装置和终端设备、可读存储介质 | |
| CN112612627A (zh) | 一种web端实现三维互动的方法 | |
| CN110442334B (zh) | 一种多人协同图形组态方法、电子设备和服务器 | |
| CN109582580B (zh) | 用于调试页面的系统、方法和装置 | |
| CN115617420A (zh) | 应用程序的生成方法、装置、设备以及存储介质 | |
| KR20160020388A (ko) | 객체 지향적 블록 기반 프로그래밍을 위한 소프트웨어 개발 방법, 장치 및 컴퓨터 판독가능 매체 | |
| CN113553123B (zh) | 数据处理方法、装置、电子设备及存储介质 | |
| CN113656041A (zh) | 数据处理方法、装置、设备及存储介质 | |
| CN113836455A (zh) | 特效渲染方法、装置、设备、存储介质及计算机程序产品 |
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 |