[发明专利]一种web端实现三维互动的方法

说明书

本发明提供一种web端实现三维互动的方法，主要步骤如下：第一步：创建web端三维模块。第二步：创建可视化模块。第三步：对接数据API接口，完成数据的可视化展示。第四步：通过WebSocket接口完成前后端信号通信。本发明能够实现web端的三维可视化项目的快速互动通信，提高了通信传输效率和质量，对常见的页面元素的抽象，提供了更丰富、灵活的配置方式，实现了具备较高可读性、可编程、可批量操作、高效的可视化数据可视化模块的配置技术方案，使得三维相关的应用程序智能在web端流畅运行，更好的呈现三维应用，能够突破浏览器的限制，适应性更强，达到快速进行三维可视化互动的目的。

技术领域

本发明涉及计算机领域，具体为一种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协议通信完成第三步，具体步骤如下：