Three.js数据可视化大屏分享(含源码)

309 阅读1分钟

在线演示地址(需科学上网):knight-l.github.io/datav/

github 地址(需科学上网):github.com/knight-L/sc…

20251120-162031.gif

功能特性

  1. 3D 地图可视化: 基于 Three.js 的 3D 地图渲染,轮廓飞线动画效果,侧边扫光视觉效果
  2. 省级地图展示: 四川省地理轮廓精确呈现
  3. 多图表联动: 柱状图、折线图等多种数据可视化形式
  4. 响应式设计: 支持多种屏幕尺寸自适应
  5. 实时调试面板: 使用 Leva 实现参数实时调整

技术栈

本项目是一个基于现代 Web 技术的数据可视化大屏应用,主要技术栈包括:

  • 核心框架: React 19 + TypeScript
  • 构建工具: Vite (Rolldown 版本)
  • 3D 可视化: Three.js + @react-three/fiber + @react-three/drei
  • 数据可视化: ECharts
  • 地理数据处理: D3-geo + topojson-client
  • 动画库: GSAP
  • UI 库: Styled-components
  • 调试工具: Leva
  • 自适应布局: autofit.js