今天为大家整理了 10 个优质的开源数据可视化大屏项目，涵盖 3D 地球、数字孪生、地图可视化等多种场景，技术栈涉及 Three.js、Vue3、React 等主流技术，非常适合学习和参考。
一、数字孪生大屏
1. MF-TurbineMonitor - 风力发电机数字孪生
项目简介：大型涡轮扇叶风力发电机数据大屏案例，支持设备拆解组装、状态监控等功能。
在线演示 ：fengtianxi001.github.io/MF-TurbineM...
开源地址 ：github.com/fengtianxi0...
技术栈：Vue 3 + TypeScript + Vite + Three.js
核心特性：
- 风机零部件高亮拾取
- 设备拆解与组装动画
- 偏航角数据绑定
- 部件状态实时监控
- 光线动效与信息面板
2. MF-StationMonitor - 变电站数字孪生大屏
项目简介：变电站数字孪生可视化大屏，展示电力设备的运行状态。
在线演示 ：fengtianxi001.github.io/MF-StationM...
开源地址 ：github.com/fengtianxi0...
3. day-night-digital-twins - 智慧园区数字孪生
项目简介：智慧园区数字孪生项目，展示园区建筑的日夜场景切换。
在线演示 ：gcat.cc/demo/park
技术栈：Three.js + GSAP + Webpack + GLSL Shader
核心特性：
- 日夜场景切换效果
- GLSL 着色器特效
- 园区建筑 3D 展示
一、3D 地球可视化
4. 3d-earth - 炫酷 3D 地球大屏
项目简介：一个基于 WebGL 的 3D 地球可视化项目，展示了地球、星空背景、辉光大气层、城市标点、卫星环绕、飞线动画等特效。
在线演示 ：gcat.cc/demo/earth
技术栈：Three.js + TypeScript + Webpack + GSAP
核心特性：
- 地球表面纹理与星空背景
- 辉光与大气层效果
- 城市标签与标点系统
- 卫星环绕动画
- 国家/城市间飞线连接
5. MF-2.5DMap - 2.5D 地图可视化
项目简介：通过 GeoJSON 渲染 2.5D 地图的案例，支持行政区选择与开场动画。
在线演示 ：fengtianxi001.github.io/MF-2.5DMap
开源地址 ：github.com/fengtianxi0...
技术栈：Vue 3 + Three.js + Vite + Arco Design + Turf.js
核心特性：
- 基于 GeoJSON 数据渲染 3D 地图
- 自动调整相机位置与缩放比例
- 开场动画与行政区选择
- 使用 WGS84 坐标系直接渲染
三、网络安全与监控大屏
6. MF-NetworkMonitor - 网络安全数据大屏
项目简介：功能简洁的网络安全监控数据大屏案例。
在线演示 ：fengtianxi001.github.io/MF-NetworkM...
开源地址 ：github.com/fengtianxi0...
四、数据可视化组件
7. MF-PlaneGraph - 设备布置平面图编辑器
项目简介：一个可视化的设备布置平面图编辑器，支持拖拽编辑。
在线演示 ：mf-plane-graph.vercel.app/
开源地址 ：github.com/fengtianxi0...
8. sc-datav - 四川省数据可视化大屏
项目简介：基于 React 和 Three.js 的四川省数据可视化大屏，包含多个演示案例。
在线演示：
开源地址 ：github.com/knight-l/sc...
技术栈：React 19 + TypeScript + Vite + Three.js + ECharts + GSAP + D3-geo
核心特性：
- 3D 地图渲染与轮廓飞线动画
- 侧边扫光视觉效果
- 多图表联动（柱状图、折线图）
- 响应式布局设计
- Leva 实时调试面板
9. ThreeMaps - Vue3 + Three.js 数据大屏
项目简介：基于 Vue3 和 Three.js 开发的数据可视化大屏项目。
开源地址 ：github.com/opendidi/Th...
技术栈：Vue 3 + Three.js + Vite + ECharts + GSAP + D3-geo
核心特性：
- 3D 地图可视化
- ECharts 图表集成
- 自适应布局（autofit.js）
- 交互式地图操作
五、高级 3D 渲染
10. webgi-jewelry - WebGi 珠宝展示页面
项目简介：使用 WebGi 引擎构建的可滚动落地页模板，基于修改版 Three.js，支持高级渲染效果。
技术栈：WebGi + TypeScript + Parcel + GSAP ScrollTrigger
核心特性：
- 滚动触发动画
- 高级 3D 渲染效果
- 仅 20 行代码实现核心渲染
- 流畅的滚动叙事体验
技术栈总结
| 技术 | 使用项目 |
|---|---|
| Three.js | 全部项目 |
| Vue 3 | MF-2.5DMap、MF-TurbineMonitor、MF-StationMonitor、MF-NetworkMonitor、MF-PlaneGraph、ThreeMaps |
| React | sc-datav |
| TypeScript | 大部分项目 |
| Vite | MF-2.5DMap、MF-TurbineMonitor、MF-StationMonitor、MF-NetworkMonitor、MF-PlaneGraph、ThreeMaps、sc-datav |
| GSAP | 3d-earth、sc-datav、ThreeMaps、day-night-digital-twins、webgi-jewelry |
| ECharts | sc-datav、ThreeMaps |
| WebGi | webgi-jewelry |
学习建议
- 入门推荐 ：从
3d-earth开始，学习基础的 Three.js 地球渲染 - 进阶学习 ：
MF-TurbineMonitor和MF-StationMonitor展示了完整的数字孪生实现 - 地图可视化 ：
MF-2.5DMap和sc-datav是学习 GeoJSON + Three.js 的好案例 - 现代技术栈 ：
sc-datav使用了 React 19 + Vite + Rolldown 最新技术组合
以上就是本次分享的 10 个开源数据可视化大屏项目，涵盖了多种应用场景和技术方案。建议收藏本文，按需学习参考！
重要声明：
- 本项目所有源码仅供个人学习、研究和技术交流使用
- 严禁将本合集中的源码用于商业售卖或盈利目的
- 如需商用，请自行联系各项目原作者获取授权
- 使用本合集中的项目请遵守各自原始开源协议
- 如有侵权，请联系删除
觉得有用，欢迎点赞、转发、关注，获取更多技术干货！
如果有些源码没有了可以关注公众号（柳杉前端）咨询我