Wantonly Drag，一套开源组件化三维数据大屏、数字孪生项目
在数字化建设中，数据大屏或数字孪生项目往往要前端 + 三维 + 数据多部门协作：需求收集 → 定制开发 → 测试 → 运维，周期动辄数月，且一旦业务指标变化就需要整包重构，最终“大屏沦为 PPT”。
而这款开源项目 Wantonly Drag 把 低代码理念 引入三维数字孪生场景，通过“拖组件 + 改参数 + 发布”三步，显著压缩交付成本，并保持后期可维护性。对于团队而言，它既能作为快速交付的生产工具，也是一份可深入拆解的低代码可视化实现案例。
模块介绍
项目内置了丰富的基础、装饰与边框组件，可像搭积木一样拼装复杂页面。
基础模块
边框模块
装饰模块
效果预览：
述截屏均来源于仓库 README 与线上体验站，方便快速感知产品形态：
大屏设计器主界面
左侧 组件面板、中央 画布、右侧 属性栏 的“三栏式”布局，所见即所得；支持拖拽、缩放、旋转、组合，交互体验接近 Figma。
数字孪生双视图
上层 2D 图表可与底层 3D 场景实时联动。示例中生产线模型发生告警时，图表同步高亮；反向点击图表也能定位 3D 模型节点。
主要功能：
| 功能域 | 关键能力 |
|---|---|
| 鉴权系统 | 登录、注销、用户 / 角色 / 菜单管理一站式集成 |
| 可视化设计 | 拖拽式组合组件、属性面板参数化，快速制作大屏 |
| 看板管理 | 支持看板上架 / 下架 / 克隆 / 再编辑，全生命周期托管 |
| 模板与资源 | 内置模板库、图片与 3D 模型资源库，支持自定义组件上传与收藏 |
| 公告发布 | 可对已发布看板下发公告，实现多屏实时通知 |
| 数字孪生模式 | 业内少见的 2D-3D 无缝融合，双向数据绑定与交互 |
| 二次开发 | 组件源码开放，预留 JS 插槽，可对接企业自有 SDK |
提示：仓库采用 MIT 许可，可放心用于商业项目；如需线上体验站，可参见 README 中的演示地址。
快速上手
git clone https://github.com/1035141145/wantonly-drag-open.git
cd wantonly-drag-open
npm i
npm run dev # 访问 http://localhost:5173结语
Wantonly Drag 用低代码方式 “降维” 了数字孪生可视化：从手写代码到拖拽拼装，从漫长迭代到即时发布。
无论你是 系统集成商、企业前端团队，还是个人研究者，都能从中获得：
- 交付加速——缩短项目周期、降低维护成本；
- 学习范例——深入理解低代码编辑器、2D/3D 统一渲染与状态驱动；
- 生态延展——开放组件与插件机制，方便融合自有数据与业务逻辑。
如果你正在寻找 成本可控、二次开发友好 的数字孪生大屏解决方案，现在就克隆仓库、跑一遍 demo——也许下一份高效交付的项目立刻就能上线。
开源地址：
