大型风力发电机监控平台

Vue3 + Three.js 风力发电机组数字孪生监控大屏。中间为可交互 3D 风机模型，两侧为 ECharts 实时图表面板，支持设备点击查状态、拆解动画、线框/透明玻璃模式切换，以及蓝 绿双主题。

关键词： 数字孪生 · 风电监控大屏 · Three.js 工业可视化 · Vue3 大屏 · GLB 模 型压缩 · ECharts 实时图表 · WebGL · 智慧能源

在线演示：

• 官网：zybkpro.top/threejs/windPowerGeneration
• GitHub Pages：zybkpro.github.io/ZP-WindPowerGeneration

预览

▶ 在线体验：GitHub Pages 演示

Topics 与 About 配置见 docs/GITHUB_SEO.md。

功能亮点

• 3D 数字孪生 — 双 GLB 模型（设备 + 外壳），9 大部件可点击交互，拆解/组装动画 ，扇叶启停
• 6 块数据面板 — 参数监测、历史功率、日发电量、运行监测、故障对比、偏航角度， 10s 自动刷新
• 设备状态联动 — 运行监测面板点击设备，3D 高亮 + 弹窗展示正常/预警/报警
• 显示模式 — 实体 / 线框 / 透明玻璃独立组合，线框颜色随主题变化
• 双主题 — 蓝色（默认）/ 绿色一键切换，Header、图表、3D 全局联动
• 模型优化 — Draco + WebP 压缩，总体积从 5.7 MB 降至约 660 KB

适用场景

• 工业数字孪生 / 智慧能源大屏学习与参考
• Three.js + Vue3 3D 交互项目练手
• GLB 模型压缩、大屏适配、ECharts 联动的完整示例

快速开始

yarn install
yarn dev        # http://localhost:1124
yarn build      # 输出到 dist/
yarn preview    # 预览构建结果

可用脚本

命令	说明
yarn dev	本地开发（端口 1124）
yarn build	生产构建，产物输出至 dist/
yarn preview	预览构建结果
yarn compress:models	压缩 GLB 模型（源文件放 models-source/）
yarn type-check	TypeScript 类型检查
yarn lint	ESLint 检查并修复

部署

GitHub Pages

推送到 main 后由 Actions 自动构建并发布：

https://zybkpro.github.io/ZP-WindPowerGeneration/

仓库 Settings → Pages → Source 需设为 GitHub Actions。

nginx 静态托管

base 为相对路径 ./，可将 dist/ 放到任意子目录：

yarn build
rsync -avz --delete dist/ user@server:/usr/share/nginx/html/threejs/windPowerGeneration/

路由使用 Hash 模式，无需 SPA fallback。

技术栈

Vue 3 · TypeScript · Vite 5 · Three.js r170 · ECharts 5 · Vue Router 4 · Sass · gltf-transform

项目结构

src/
├── views/         DetailView（机组监控）
├── components/    WidgetPanel01~07 数据面板
├── hooks/         useThree、useTurbine、useEcharts
├── layout/        Header / Footer / Panel / Loading
└── utils/         主题、图表配色、设备状态、Mock 数据

public/models/     压缩后的 GLB 模型
models-source/     模型原始文件（gitignore）
scripts/           模型压缩脚本
dist/              构建产物（gitignore）
docs/              SEO 配置与预览图

模型压缩

将原始 .glb 放入 models-source/ 后执行：

yarn compress:models

模型	压缩前	压缩后
equipment.glb	2.7 MB	162 KB
skeleton.glb	3.1 MB	489 KB

流水线：1024 纹理 → WebP (q80) → Draco 重压缩

素材来源

项目中的 3D 模型来自 ZYBK Pro 素材中心（ 大屏组件、三维资源、HDR 等可按分类筛选下载）。

Star

如果这个项目对你有帮助，欢迎点个 Star ⭐ 支持一下，也便于后续搜索与更新跟进。

License

Private · 仅供学习与展示参考