大家好，我是 一颗烂土豆。
最近在数据可视化领域进行了一些探索，基于 Vue 3 和 Three.js 开发了一款轻量级的 3D 图表库 ------ chart3。
今天不谈晦涩的代码实现，主要和大家分享一下这个项目的设计初衷 、目前进展 以及未来的规划。
💻 在线体验 ：chart3js.netlify.app/
🌟 愿景 (Vision)
在实际开发中，我们往往面临两难的选择：要么使用传统的 2D 图表库（如 ECharts）通过"伪 3D"来实现效果，但缺乏立体感和自由视角；要么直接使用 Three.js 从零撸，成本高且难以复用。
chart3 的诞生就是为了解决这个问题，它的核心愿景是：
- 极简配置：延续 ECharts 的 "Option-based" 配置思维，让前端开发者无需深入了解 WebGL/Three.js 的底层细节，通过简单的 JSON 配置即可生成炫酷的 3D 图表。
- 真 3D 体验：全场景 3D 渲染，支持 360 度自由旋转、缩放、平移，提供真实的光影、材质和空间感。
- 轻量与现代：完全基于 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"的一次尝试。
让我们一起把数据变得更酷一点！