Vue 3 + Three.js 打造轻量级 3D 图表库 —— chart3

大家好，我是 一颗烂土豆。

最近在数据可视化领域进行了一些探索，基于 Vue 3 和 Three.js 开发了一款轻量级的 3D 图表库 —— chart3。

今天不谈晦涩的代码实现，主要和大家分享一下这个项目的设计初衷、目前进展以及未来的规划。

💻 在线体验：https://chart3js.netlify.app/

🌟 愿景 (Vision)

在实际开发中，我们往往面临两难的选择：要么使用传统的 2D 图表库（如 ECharts）通过“伪 3D”来实现效果，但缺乏立体感和自由视角；要么直接使用 Three.js 从零撸，成本高且难以复用。

chart3 的诞生就是为了解决这个问题，它的核心愿景是：

1. 极简配置：延续 ECharts 的 "Option-based" 配置思维，让前端开发者无需深入了解 WebGL/Three.js 的底层细节，通过简单的 JSON 配置即可生成炫酷的 3D 图表。
2. 真 3D 体验：全场景 3D 渲染，支持 360 度自由旋转、缩放、平移，提供真实的光影、材质和空间感。
3. 轻量与现代：完全基于 Vue 3 Composition API 和 TypeScript 构建，模块化设计，无历史包袱。

🚀 现状 (Current Status)

目前项目处于快速迭代阶段，核心引擎已经搭建完毕，并实现了一套可视化的配置系统。你可以通过 在线 Demo 实时调整参数并预览效果。

已支持的功能特性：

• 基础图表组件：
  • 📊 3D 柱状图 (Bar3D)：支持多系列、不同颜色的柱体渲染。

• 🥧 3D 饼图 (Pie3D)：支持扇区挤出高度、标签展示。

* 📈 3D 折线图 (Line3D)：支持管状线条渲染。

* 🌌 3D 散点图 (Scatter3D)：支持三维空间的数据点分布。

• 可视化配置系统：
  • 数据源 (Data)：支持静态数据配置。
  • 主题与配色 (Theme)：内置多套配色方案，支持自定义默认颜色。
  • 坐标系 (Coordinate)：可实时调整网格的宽度、深度、高度，以及各轴线、刻度、网格线的显示与隐藏。
  • 材质系统 (Material)：这是 3D 图表的灵魂。支持实时调节透明度、粗糙度 (Roughness)、金属度 (Metalness)，轻松实现玻璃、金属等质感。
  • 灯光系统 (Lighting)：支持环境光和方向光的强度与位置调节，营造氛围感。
  • 交互 (Interaction)：支持鼠标悬停高亮、HTML 标签 (Label) 自动跟随。

📅 待实现的任务 (Roadmap)

为了让 chart3 真正成为生产可用的图表库，后续还有很多有趣的工作要做：

• 高级图表开发：
  • 🌊 3D 曲面图 (Surface 3D)：用于展示复杂的三维函数或地形数据（目前 Demo 中显示为“待开发”）。
  • 🗺️ 3D 地图 (Map 3D)：支持 GeoJSON 数据的三维挤出渲染。
• 性能优化：
  • 引入 InstancedMesh 技术，大幅提升大数据量（如 10w+ 散点或柱体）下的渲染性能。
• 动画系统：
  • 实现图表的入场动画（如柱子升起、饼图展开）。
  • 数据更新时的平滑过渡动画。
• 工程化与文档：
  • 完善 API 文档和使用指南。
  • 提供 NPM 包发布，方便项目集成。

🤝 结语

这个项目是我对“数据可视化 x 3D”的一次尝试。

让我们一起把数据变得更酷一点！