Three.js数据可视化大屏模版
摘要：该项目是一个基于React 19和Three.js的3D数据可视化大屏，展示广东省经济人口等关键指标。采用Vite构建，集成ECharts图表、GSAP动画引擎和d3-geo地理投影，实现沉浸式3D地图交互（含飞线动画、粒子系统等特效）和动态数据可视化。支持地图钻取、自动巡航及1920x1080大屏自适应，通过SCSS/TailwindCSS实现样式管理。源码已开源在GitHub。
·
这是一个基于 React 和 Three.js 构建的 3D 数据可视化大屏项目，展示了广东省的经济、人口等关键数据指标。项目集成了 3D 地图交互、ECharts 图表分析以及丰富的动态视觉效果。
🛠 技术栈
- 核心框架: React 19
- 构建工具: Vite
- 3D 引擎: Three.js (基于
src/mini3d进行二次封装) - 动画引擎: GSAP (处理复杂的场景运镜和时间轴动画)
- 图表库: ECharts
- 地理投影: d3-geo
- 大屏适配: autofit.js
- 样式预处理: SCSS / TailwindCSS
✨ 功能特性
- 沉浸式 3D 地图:
- 广东省行政区划的 3D 模型渲染与拉伸效果。
- 支持地图钻取、视角切换与自动巡航。
- 动态材质效果（流光、渐变、雾化）。
- 丰富的视觉动效:
- 飞线动画 (FlyLine): 展示城市间的流动数据。
- 粒子系统 (Particles): 氛围渲染。
- 动态标注 (Label3d): 基于 CSS3D 的 HTML 标签，跟随 3D 坐标移动。
- 聚焦光圈 (Focus): 高亮显示重点区域。
- 数据可视化组件:
- 包含各类 ECharts 图表（折线图、饼图、雷达图等）展示经济趋势、人口占比等数据。
- 全屏幕自适应: 针对 1920x1080 设计稿进行自动缩放适配。
源码地址：
https://github.com/Shunrai1/react-three-map
在线体验：
https://shunrai1.github.io/react-three-map
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)