CN112464126B - 一种基于Threejs生成全景图表的方法、终端设备及存储介质 - Google Patents

Abstract

本发明涉及一种基于Threejs生成全景图表的方法、终端设备及存储介质，该方法中包括：加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内；对全景容器组件对应的场景和相机进行初始化；根据每个图表组件生成场景对象，并生成的场景对象添加至对应的场景内；初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内；全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动；根据帧速率反复触发来调整相机的位置；页面显示全景图表效果。本发明通过系统特有的全景容器组件，可以快速将几块图表结合起来，生成相应的全景图表页面。

Description

一种基于Threejs生成全景图表的方法、终端设备及存储介质

技术领域

本发明涉及图表生成领域，尤其涉及一种基于Threejs生成全景图表的方法、终端设备及存储介质。

背景技术

随着大数据信息化建设的快速发展，信息化系统针对数据展示的功能需求越来越多。传统的表格展示已经不足以支持目前的大数据多维度展示，为了直观看出数据背后的规律和特点，系统建设方需要用各种各样的图表来形象、科学地展示数据。

当前互联网上有多种数据可视化插件，它们都支持常见的柱状图、饼图、折线图等图表的展示，能够图文并茂地描述数据，目前已有的D3、Echarts等数据可视化插件都支持大量的图表类型绘制。但是由于传统的浏览器页面，仅仅支持平面展示，这就限制了图表的各种展示方式也被限制在平面内。另外，由于各类型的图表都有各自的缺陷，例如折线图适合展示变化趋势，不适合展示大数据集；柱状图适合展示各组数据对比，不适合展示每组数据占比。因此一组业务数据的展示，都需要搭配多种类型的图表，需要在浏览器页面占据大部分位置。使用者在查看多块业务数据时，往往都需要开启多个浏览器窗口，不断的切换窗口进行对比。

发明内容

为了解决上述问题，本发明提出了一种基于Threejs生成全景图表的方法、终端设备及存储介质。

具体方案如下：

一种基于Threejs生成全景图表的方法，包括以下步骤：

S1：当页面解析到全景容器组件时，加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内；

S2：当全景容器组件被挂载至页面上后，对全景容器组件对应的场景和相机进行初始化；

S3：当各图表组件均被挂载至页面上后，根据每个图表组件生成场景对象，并生成的场景对象添加至对应的场景内；

S4：初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内；

S5：全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动；

S6：将接收到的用于场景展示的宽和高作为参数调用requestAnimationFrame()，根据帧速率反复触发requestAnimationFrame()来调整相机的位置；

S7：页面显示全景图表效果。

进一步的，步骤S1中图表组件的挂载过程包括：全景容器组件通过props接收前、后、左和右四个方向的图表组件，在created周期回调过程中，利用import函数加载四个方向的图表组件，加载后触发then回调，在then回调里面通过vue框架的Vue.extend创建构造器并调用$mount动态将四个方向的图表组件分别挂载到全景容器组件的front、back、left、right四个节点下。

进一步的，全景容器组件挂载的过程包括：

S101：在HTML页面中预留全景容器组件Dom的挂载点，将全景容器组件以自定义标签的形式写在挂载点处；

S102：调整全景容器组件的位置，并设定其对应的width和height属性；

S103：将全景容器组件内需要渲染的前、后、左和右四个方向的图表组件的存储路径填写在标签front、back、left和right的属性内。

进一步的，步骤S2中场景和相机的初始化过程包括：在mounted周期回调过程中调用new THREE.Scene()对场景进行初始化，调用new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)对相机进行初始化，并设置的视锥体的垂直视野角为75度、长宽比跟窗口自适应、近平面1远平面1000，模拟人眼的视觉。

进一步的，步骤S3具体包括：当前、后、左和右四个方向的图表组件均被挂载至页面上后，每一个方向的图表组件均调用new THREE.CSS3DObject()生成四个方向的场景对象，并设定前、后、左和右四个方向的position分别为[0,0,512]、[0,0,-512]、[512,0,0]和[-512,0,0]，设定前、后、左和右四个方向的rotation分别为[0,Math.PI,0]、[0,0,0]、[0,-Math.PI/2,0]和[0,Math.PI/2,0]，调用场景的add方法将生成的四个方向的场景对象添加至场景内。

进一步的，步骤S4中渲染器通过调用new THREE.CSS3DRenderer()进行初始化；渲染效果的宽和高的范围通过将通过props接收到的用于场景展示的宽和高作为参数，调用渲染器的setsize方法进行设定；渲染器通过调用全景容器组件的appenChild方法将渲染器的domElement挂载到页面上。

进一步的，步骤S5对用户鼠标操作事件绑定的过程包括：

当用户触发鼠标击下事件时，在鼠标不释放的情况下监听鼠标移动事件，并通过上下左右移动做出相应的角度补偿，确定中心视角的x、y、z参数，调用相机的lookAt()方法重新设定相机视角的位置，以接收到场景偏移的反馈；

当用户触发鼠标击起事件时，则移除鼠标击下和鼠标移动，场景视角不再变化；

当用户触发鼠标滚轮事件时，通过事件的event.deltaY确定鼠标滚轮的滚动方向为向下滚动或向上滚动，设定相机靠近或远离，并调用相机的updateProjectionMatrix()方法更新场景。

一种基于Threejs生成全景图表的终端设备，包括处理器、存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本发明实施例上述的方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例上述的方法的步骤。

本发明采用如上技术方案，相比于现有技术具有以下有益效果：

1.提高浏览器页面的利用率。本发明能够将浏览器页面的任意页面块渲染成全景效果，在全景块中可以同时摆放多个图表，通过用户鼠标的拖放手势，对全景块进行360度转动，可以模拟人眼视觉查看效果。利用本发明提供的全景图表技术，将一类业务数据放在同一全景块内，一方面查看数据图表时将更加科学直观，另一方面浏览器页面能容纳更多的内容。

2.兼容各种图表、兼容新老系统。一方面，由于本发明最终会将全景容器组件渲染成HTML文档的Dom节点，所以任意基于浏览器页面开发的系统都能使用。另一方面，由于各种图表最终都会被渲染成HTML文档的Dom节点，而全景容器组件是将Dom节点插入到容器内，再渲染出全景效果，所以各种图表插件开发好的图表组件都能兼容。

3.降低代码耦合。做可视化的开发者可以专心按照需求单各块数据图表组件，而主体页面的开发者则可以使用任意图表组件作为参数传入全景容器构成最终的全景效果。两边代码独立开发，互不依赖降低耦合度。

附图说明

图1所示为本发明实施例一的流程图。

图2所示为该实施例中全景容器组件在页面中的示意图。

具体实施方式

为进一步说明各实施例，本发明提供有附图。这些附图为本发明揭露内容的一部分，其主要用以说明实施例，并可配合说明书的相关描述来解释实施例的运作原理。配合参考这些内容，本领域普通技术人员应能理解其他可能的实施方式以及本发明的优点。

现结合附图和具体实施方式对本发明进一步说明。

实施例一：

本发明实施例提供了一种基于Threejs生成全景图表的方法，如图1和图2所示，所述方法包括以下步骤：

S1：当页面解析到全景容器组件时，加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内。

全景容器组件(S1)是基于Vue框架开发的组件，当其被插入到节点树的时候，就会渲染成浏览器html页面的一个文档节点，是全景效果的展示载体。系统基于全景容器渲染出完成的效果，并且监听用户的鼠标击下Mousedown、鼠标移动Mousemove、鼠标击起Mouseup、鼠标滚轮Wheel等事件，通过这些事件触发全景容器效果的重新渲染，达成全景的效果。

全景容器组件中的props接收用户对指定容器的输入参数。用户通过传入宽和高来指定场景的展示宽和高，通过设定四个视角所展示的图表组件来指定全景容器的环绕展示效果。

由于全景容器组件本身就是文档节点，因此既可以用多个全景容器组件组成一个全新的HTML文档页面，也可以在已有的HTML文档页面中空置出一个范围中来放置全景容器组件。

全景容器组件挂载的过程包括步骤S101-S103：

S101：在HTML页面中预留全景容器组件Dom的挂载点，将全景容器组件以自定义标签的形式写在挂载点处；

S102：调整全景容器组件的位置，并设定其对应的width和height属性；

S103：将全景容器组件内需要渲染的前、后、左和右四个方向的图表组件的存储路径填写在标签front、back、left和right的属性内。

图表组件(S2)是基于Vue框架通过相应的可视化需求单所编写的柱状图、饼图、折线图等等图表，可以是基于Echarts或者D3等可视化插件开发的组件。系统要求图表组件按照Vue的格式进行开发，图表组件一旦被挂载到全景容器上，就会在其生命周期中去调用接口获取数据并渲染效果。一个全景容器组件需要配置四块图表组件在相应的前、后、左和右四个方向的视角，完成全景效果。

该实施例中图表组件的挂载过程包括：全景容器组件通过props接收前、后、左和右四个方向的图表组件，在created周期回调过程中，利用import函数加载四个方向的图表组件，加载后触发then回调，在then回调里面通过vue框架的Vue.extend创建构造器并调用$mount动态将四个方向的图表组件分别挂载到全景容器组件的front、back、left、right四个节点下。

S2：当全景容器组件被挂载至页面上后，对全景容器组件对应的场景和相机进行初始化。

场景是Threejs组件之一，系统用其来实现在全景容器组件中按照想要的位置和角度放置或移除物体。

相机(S4)也是Threejs组件之一，系统用其来实现在全景容器组件中决定在何种角度要展示何种物体。由于系统需要的是环绕的全景效果，所以此处使用PerspectiveCamera透视相机，更接近人的视觉近大远小的观看效果。

该实施例中对场景和相机的初始化过程包括：在mounted周期回调过程中调用newTHREE.Scene()对场景进行初始化，调用new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)对相机进行初始化，并设置的视锥体的垂直视野角为75度、长宽比跟窗口自适应、近平面1远平面1000，模拟人眼的视觉。

S3：当各图表组件均被挂载至页面上后，根据每个图表组件生成场景对象，并生成的场景对象添加至对应的场景内。

步骤S3的具体实现过程为：当前、后、左和右四个方向的图表组件均被挂载至页面上后，每一个方向的图表组件均调用new THREE.CSS3DObject()生成四个方向的场景对象，并设定前、后、左和右四个方向的position分别为[0,0,512]、[0,0,-512]、[512,0,0]和[-512,0,0]，设定前、后、左和右四个方向的rotation分别为[0,Math.PI,0]、[0,0,0]、[0,-Math.PI/2,0]和[0,Math.PI/2,0]，调用场景的add方法将生成的四个方向的场景对象添加至场景内。

S4：初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内。

渲染器(S5)用于系统在全景容器组件中渲染图表组件。由于图表是需要鼠标点击、悬浮提示等等一些功能的，所以需要渲染器也支持渲染dom文档节点。系统使用CSS3DRenderer借助css的属性来渲染dom节点的3D效果。

渲染器通过调用new THREE.CSS3DRenderer()进行初始化；渲染效果的宽和高的范围通过将通过props接收到的用于场景展示的宽和高作为参数，调用渲染器的setsize方法进行设定；渲染器通过调用全景容器组件的appenChild方法将渲染器的domElement(也就是渲染完的dom节点)挂载到页面上。

S5：全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动。

对用户鼠标操作事件绑定的过程包括：

当用户触发鼠标击下事件时，在鼠标不释放的情况下监听鼠标移动事件，并通过上下左右移动做出相应的角度补偿，确定中心视角的x、y、z参数，调用相机的lookAt()方法重新设定相机视角的位置，以接收到场景偏移的反馈；

当用户触发鼠标击起事件时，则移除鼠标击下和鼠标移动，场景视角不再变化；

当用户触发鼠标滚轮事件时，通过事件的event.deltaY确定鼠标滚轮的滚动方向为向下滚动或向上滚动，设定相机靠近或远离，并调用相机的updateProjectionMatrix()方法更新场景。

S6：将接收到的用于场景展示的宽和高作为参数调用requestAnimationFrame()，根据帧速率反复触发requestAnimationFrame()来调整相机的位置。

S7：页面显示全景图表效果。

本发明实施例通过系统特有的全景容器组件，可以快速将几块图表结合起来，生成相应的全景图表页面。本发明实施例具有以下特点：高兼容性，兼容各种图表组件，只要图表最终都是渲染成HTML文档的Dom节点，都能够插入到全景容器里面；低代码耦合，全景容器类似于页面的中间插槽，将图表组件作为参数传入其中，代码分开独立；模拟人眼全景效果，基于Threejs而针对全景图表调试编写的场景、相机、渲染器，并且合理地绑定用户的鼠标操作，渲染出优秀的全景图表页面。

通过本发明实施例实现全景图表，一方面对于企业来说，能够降低开发成本，不需要寻找同时会WebGL技术做3D渲染又会熟练开发页面图表的研发人员，只需要让各个研发人员按用户需求做好数据展示图表，就能快速生成全景图表。另一方面，通过全景的方式展示图表，能够让用户以全新维度的视角去比对发现数据背后的规律和关系。

实施例二：

本发明还提供一种基于Threejs生成全景图表的终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本发明实施例一的上述方法实施例中的步骤。

进一步地，作为一个可执行方案，所述基于Threejs生成全景图表的终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述基于Threejs生成全景图表的终端设备可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，上述基于Threejs生成全景图表的终端设备的组成结构仅仅是基于Threejs生成全景图表的终端设备的示例，并不构成对基于Threejs生成全景图表的终端设备的限定，可以包括比上述更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述基于Threejs生成全景图表的终端设备还可以包括输入输出设备、网络接入设备、总线等，本发明实施例对此不做限定。

进一步地，作为一个可执行方案，所称处理器可以是中央处理单元(CentralProcessing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述基于Threejs生成全景图表的终端设备的控制中心，利用各种接口和线路连接整个基于Threejs生成全景图表的终端设备的各个部分。

所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述基于Threejs生成全景图表的终端设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据手机的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例上述方法的步骤。

所述基于Threejs生成全景图表的终端设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)以及软件分发介质等。

尽管结合优选实施方案具体展示和介绍了本发明，但所属领域的技术人员应该明白，在不脱离所附权利要求书所限定的本发明的精神和范围内，在形式上和细节上可以对本发明做出各种变化，均为本发明的保护范围。

Claims (6)

1.一种基于Threejs生成全景图表的方法，其特征在于，包括以下步骤：

S1：当页面解析到全景容器组件时，加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内；

S2：当全景容器组件被挂载至页面上后，对全景容器组件对应的场景和相机进行初始化；场景和相机的初始化过程包括：在mounted周期回调过程中调用new THREE.Scene()对场景进行初始化，调用new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000)对相机进行初始化，并设置视锥体的垂直视野角为75度、长宽比跟窗口自适应、近平面1、远平面1000，模拟人眼的视觉；

S3：当各图表组件均被挂载至页面上后，根据每个图表组件生成场景对象，并将生成的场景对象添加至对应的场景内；步骤S3具体包括：当前、后、左和右四个方向的图表组件均被挂载至页面上后，每一个方向的图表组件均调用new THREE.CSS3DObject()生成四个方向的场景对象，并设定前、后、左和右四个方向的position分别为[0, 0, 512]、[0, 0, -512]、[512, 0, 0]和[-512, 0, 0]，设定前、后、左和右四个方向的rotation分别为[0,Math.PI, 0]、[0, 0, 0]、[0, -Math.PI/2, 0]和[0, Math.PI/2, 0]，调用场景的add方法将生成的四个方向的场景对象添加至场景内；

S4：初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内；渲染器通过调用newTHREE.CSS3DRenderer()进行初始化；渲染效果的宽和高的范围通过将props接收到的用于场景展示的宽和高作为参数，调用渲染器的setsize方法进行设定；渲染器通过调用全景容器组件的appenChild方法将渲染器的domElement挂载到页面上；

S5：全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动；

S6：将接收到的用于场景展示的宽和高作为参数调用requestAnimationFrame（），根据帧速率反复触发requestAnimationFrame（）来调整相机的位置；

S7：页面显示全景图表效果。

2.根据权利要求1所述的基于Threejs生成全景图表的方法，其特征在于：步骤S1中图表组件的挂载过程包括：全景容器组件通过props接收前、后、左和右四个方向的图表组件，在created周期回调过程中，利用import函数加载四个方向的图表组件，加载后触发then回调，在then回调里面通过vue框架的Vue.extend创建构造器并调用$mount动态将四个方向的图表组件分别挂载到全景容器组件的front、back、left、right四个节点下。

3.根据权利要求1所述的基于Threejs生成全景图表的方法，其特征在于：全景容器组件挂载的过程包括：

S101：在HTML页面中预留全景容器组件Dom的挂载点，将全景容器组件以自定义标签的形式写在挂载点处；

S102：调整全景容器组件的位置，并设定其对应的width和height属性；

S103：将全景容器组件内需要渲染的前、后、左和右四个方向的图表组件的存储路径填写在标签front、back、left和right的属性内。

4.根据权利要求1所述的基于Threejs生成全景图表的方法，其特征在于：步骤S5对用户鼠标操作事件绑定的过程包括：

当用户触发鼠标击下事件时，在鼠标不释放的情况下监听鼠标移动事件，并通过上下左右移动做出相应的角度补偿，确定中心视角的x、y、z参数，调用相机的lookAt()方法重新设定相机视角的位置，以接收到场景偏移的反馈；

当用户触发鼠标击起事件时，则移除鼠标击下和鼠标移动，场景视角不再变化；

当用户触发鼠标滚轮事件时，通过事件的event.deltaY确定鼠标滚轮的滚动方向为向下滚动或向上滚动，设定相机靠近或远离，并调用相机的updateProjectionMatrix()方法更新场景。

5.一种基于Threejs生成全景图表的终端设备，其特征在于：包括处理器、存储器以及存储在所述存储器中并在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1~4中任一所述方法的步骤。

6.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1~4中任一所述方法的步骤。

Images