基于three.js的3d大屏转动展示方法及设备与流程

本申请涉及数据展示相关，具体涉及一种基于three.js的3d大屏转动展示方法及设备。

背景技术：

1、当前，随着数字经济的不断发展，各行各业都陆续加入到了数字化转型的队伍。要实现数字化转型便离不开数字化管理系统、智能终端、数据实时展示监控中心等。而可视化数字大屏在其中扮演了十分重要的角色：可视化数字大屏是当下数据展示、业务监控、指挥调度常见的业务表达形态，常有可视化的图表、效果装饰、事件操作等技术组成酷炫的效果展示。但是现有的数据展示大多数为二维展示，展示效果不佳。

技术实现思路

1、有鉴于此，本申请的实施例致力于提供一种基于three.js的3d大屏转动展示方法及设备。

2、本申请提供了一种基于three.js的3d大屏转动展示方法，包括：

3、实时获取待展示数据；

4、基于所述待展示数据和预设的展示规则，生成canvastexture；

5、将canvastexture应用到预设3d模型的子mesh对象的材质中；其中，所述预设3d模型为利用three.js框架加载的一个预先设计的3d模型；所述预设3d模型用于作为数据展示的区域；

6、控制3d模型围绕预设轴线进行自转，以创造出卫星绕行星公转的动态视觉效果。

7、在一些实施例中，还包括：

8、设置所述3d模型的dom挂载点；设置three.js的场景、相机和渲染器，将渲染器中用于渲染的html元素挂载至dom挂载点；

9、在一些实施例中，所述渲染器为webglrenderer。

10、在一些实施例中，还包括：

11、使用mtlloader加载预设3d模型对应的材质文件；

12、使用objloader加载预设3d模型对应的模型文件；

13、基于所述材质文件和所述模型文件，展示所述预设3d模型。

14、在一些实施例中，所述将canvastexture应用到预设3d模型的子mesh对象的材质中，包括：

15、遍历每一个子mesh对象，将与子mesh对象对应的canvastexture双面渲染至子mesh对象上。

16、在一些实施例中，所述控制3d模型围绕预设轴线进行自转，包括：

17、调用web浏览器自带的window.requestanimationframe，循环预设3d模型的rotation属性的坐标，使其不断绕预设轴线转动。

18、在一些实施例中，还包括：

19、基于预设的监听器，监听所述待展示数据是否发生变化；

20、若所述待展示数据发生变化，则重新获取变化后的待展示数据；

21、基于变化后的待展示数据，重新生成canvastexture。

22、本申请还提供一种基于three.js的3d大屏转动展示装置，包括：

23、获取模块，用于实时获取待展示数据；

24、生成模块，用于基于所述待展示数据和预设的展示规则，生成canvastexture；

25、应用模块，用于将canvastexture应用到预设3d模型的子mesh对象的材质中；其中，所述预设3d模型为利用three.js框架加载的一个预先设计的3d模型；所述预设3d模型用于作为数据展示的区域；

26、旋转模块，用于控制3d模型围绕预设轴线进行自转，以创造出卫星绕行星公转的动态视觉效果。

27、本申请还提供一种电子设备，包括：

28、处理器，以及用于存储所述处理器可执行程序的存储器；

29、所述处理器，用于通过运行所述存储器中的程序，实现如上述的基于three.js的3d大屏转动展示方法。

30、本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序在被处理器运行时使得所述处理器执行如上述的基于three.js的3d大屏转动展示方法。

31、本申请所提供的一种基于three.js的3d大屏转动展示方法，首先实时获取待展示数据；基于所述待展示数据和预设的展示规则，生成canvastexture；将canvastexture应用到预设3d模型的子mesh对象的材质中；其中，所述预设3d模型为利用three.js框架加载的一个预先设计的3d模型；所述预设3d模型用于作为数据展示的区域；控制3d模型围绕预设轴线进行自转，以创造出卫星绕行星公转的动态视觉效果。如此设置，能够实时展示更新的数据，对于需要监控实时信息的应用场景非常有用；通过3d模型的自转动画，提高了数据展示的视觉效果，使信息传递更加直观和有趣。

技术特征：

1.一种基于three.js的3d大屏转动展示方法，其特征在于，包括：

2.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，还包括：

3.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，所述渲染器为webglrenderer。

4.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，还包括：

5.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，所述将canvastexture应用到预设3d模型的子mesh对象的材质中，包括：

6.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，所述控制3d模型围绕预设轴线进行自转，包括：

7.根据权利要求1所述的基于three.js的3d大屏转动展示方法，其特征在于，还包括：

8.一种基于three.js的3d大屏转动展示装置，其特征在于，包括：

9.一种电子设备，其特征在于，包括：

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序在被处理器运行时使得所述处理器执行如权利要求1至7中任一项所述的基于three.js的3d大屏转动展示方法。

技术总结本申请涉及数据安全相关技术领域，具体涉及一种基于three.js的3d大屏转动展示方法及设备。其中，方法包括：实时获取待展示数据；基于所述待展示数据和预设的展示规则，生成canvasTexture；将canvasTexture应用到预设3D模型的子Mesh对象的材质中；其中，所述预设3D模型为利用three.js框架加载的一个预先设计的3D模型；所述预设3D模型用于作为数据展示的区域；控制3D模型围绕预设轴线进行自转，以创造出卫星绕行星公转的动态视觉效果。如此可以实时展示更新的数据，对于需要监控实时信息的应用场景非常有用；通过3D模型的自转动画，提高了数据展示的视觉效果，使信息传递更加直观和有趣。技术研发人员：程大康,王志鹏,李天洋,季忠祥,潘宇饶受保护的技术使用者：江西数字网联信息安全技术有限公司技术研发日：技术公布日：2024/7/29