vue 可视化数据大屏 智慧校园综合指挥中心

数据大屏 yekong

vue数据可视化大屏 智慧校园综合指挥中心。

主要要求

围绕特定轨道环绕旋转动画效果,类似太阳系环绕效果

开发环境

vue3+vite

分辨率

1920*1080

演示地址

演示demo:vue 可视化数据大屏 智慧校园综合指挥中心

vue 可视化数据大屏 智慧校园综合指挥中心
vue 可视化数据大屏 智慧校园综合指挥中心

技术点

使用threejs
创建直径不同的5组轨道
创建3组模型,让模型围绕轨道进行旋转,并通过css2d创建对应的html监听模型变化,并实时刷新css2d的位置
监听鼠标,当鼠标放在气泡上的时候,停止当前轨道模型位置更新,当鼠标移开后,继续气泡位置的刷新。

threejs 3d环绕旋转动画效果实例

喜欢