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

权利要求书

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监听方法收到消息后，各自根据业务需要解析，完成前后端互动。