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

权利要求书

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()方法更新场景。