Vue3 + Three.js 智慧工厂 3D 数字孪生大屏产品系统Vibe Coding

制造企业在做数字化转型时，常需要一块直观展示厂区运行状态的大屏，用于领导驾驶舱、展厅演示和日常监控。传统二维报表不够直观，难以体现设备与厂区的空间关系。本项目面向智慧工厂场景，构建 3D 厂区数字孪生大屏，将产量、能耗、设备状态与告警等数据与三维场景结合展示，提升演示效果和管理决策效率。

1、3D 场景模块：使用 Three.js 程序化构建厂区建筑与设备模型，支持自动旋转、鼠标拖拽和缩放查看；
2、交互联动模块：点击建筑高亮并弹出详情面板，同时联动刷新相关图表数据；
3、数据图表模块：两侧集成 ECharts 趋势折线图、柱状图、仪表盘等多种图表；
4、指标与告警模块：顶部 KPI 数字滚动动画，滚动展示实时告警信息，数据定时刷新；
5、可扩展设计：数据层与视图层分离，可直接对接真实接口，或替换为客户提供的 GLB 模型。（作品中数据为演示数据）

我负责整体架构、3D 场景搭建、图表开发和交互实现。技术栈为 Vue3 组合式 API + Vite 构建，Three.js 负责三维渲染，ECharts 负责数据图表。难点在于 3D 场景与 Vue 组件的生命周期协同、射线拾取实现点击高亮，以及多图表同时刷新时的性能控制；通过封装场景管理类、按需渲染和统一数据调度，保证了大屏在动效丰富的同时流畅运行。