🏗️ Vue3 + Three.js + Electron 打造炫酷塔吊群3D可视化监控系统
🎄 圣诞节特别分享！一个基于 Vue3 全家桶 + Three.js 实现的智慧工地塔吊群三维可视化监控平台，支持 Web 端和桌面端双端部署！
📝 前言
在智慧工地的建设中，塔吊作为关键的大型设备，其安全监控尤为重要。传统的二维监控界面已无法满足现代化工地的管理需求，本文将分享一个基于Vue3 + Three.js + Electron技术栈打造的塔吊群3D可视化监控系统。
项目亮点：
- 🎨 科技感十足的赛博朋克风格UI设计
- 🎮 Three.js 实现的3D塔吊模型实时监控
- 📊 丰富的数据可视化图表
- 🖥️ 支持打包为桌面应用（Windows/Mac/Linux）
- 🔐 完整的登录认证系统
🛠️ 技术栈
| 技术 | 版本 | 说明 |
|---|---|---|
| Vue | 3.4.0 | 渐进式JavaScript框架 |
| Vite | 5.0.0 | 下一代前端构建工具 |
| Three.js | 0.182.0 | 3D图形库 |
| Element Plus | 2.5.0 | Vue3 UI组件库 |
| Pinia | 2.1.7 | Vue3 状态管理 |
| Vue Router | 4.2.5 | 路由管理 |
| Electron | 28.2.0 | 跨平台桌面应用 |
| ECharts | 5.4.3 | 数据可视化图表 |
| SCSS | - | CSS预处理器 |
🎯 功能特性
1️⃣ 炫酷的登录页面
- 🌌 动态粒子背景动画
- ✨ 赛博朋克风格渐变设计
- 📱 响应式布局，完美适配各种屏幕
- 🔐 表单验证 + 记住密码功能
2️⃣ 3D可视化总览页面
左侧面板：
- 设备状态指标统计
- 实时设备列表（运行/告警/离线状态）
- 快捷搜索功能
中央区域：
- Three.js 3D塔吊群场景
- 悬浮控制按钮（复位/放大/缩小）
- 全屏视图切换
右侧面板：
- 仪表盘数据展示
- 实时运行统计
- 告警信息汇总
3️⃣ 四宫格多视图监控
- 同时监控4台塔吊设备
- 独立的3D视角控制
- 实时数据叠加显示
4️⃣ 防碰撞预警系统
- 塔吊间距实时监测
- 碰撞风险等级评估
- 智能报警通知
📸 效果预览
设备管理
报警中心
数据分析
桌面应用
💻 核心代码展示
1. 登录页面核心代码
<template> <div class="login-container"> <!-- 动态粒子背景 --> <div class="particles"> <span v-for="i in 50" :key="i" class="particle" :style="getParticleStyle(i)"></span> </div> <!-- 登录表单 --> <div class="login-box"> <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名"> <template #prefix> <el-icon><User /></el-icon> </template> </el-input> </el-form-item> <!-- ... --> </el-form> </div> </div> </template> <script setup> import { ref, reactive } from 'vue' import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' const userStore = useUserStore() const handleLogin = async () => { // 设置登录状态 userStore.setLoginState({ username: loginForm.username, remember: loginForm.remember }) router.push('/dashboard') } </script>2. 3D场景初始化
import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'// 创建场景constscene=newTHREE.Scene()scene.background=newTHREE.Color(0x0a1628)// 创建相机constcamera=newTHREE.PerspectiveCamera(75,width/height,0.1,1000)camera.position.set(50,50,50)// 创建渲染器constrenderer=newTHREE.WebGLRenderer({antialias:true})renderer.setSize(width,height)renderer.shadowMap.enabled=true// 添加轨道控制器constcontrols=newOrbitControls(camera,renderer.domElement)controls.enableDamping=true// 渲染循环functionanimate(){requestAnimationFrame(animate)controls.update()renderer.render(scene,camera)}animate()3. 路由守卫实现登录验证
// router/index.jsrouter.beforeEach((to,from,next)=>{consttoken=localStorage.getItem('token')||sessionStorage.getItem('token')if(to.path==='/login'){next()}elseif(!token){next('/login')}else{next()}})4. Pinia 状态管理
// stores/user.jsimport{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>({userInfo:null,token:''}),getters:{isLoggedIn:(state)=>!!state.token},actions:{setLoginState({username,remember}){consttoken='demo_token_'+Date.now()this.token=tokenthis.userInfo={username}if(remember){localStorage.setItem('token',token)}else{sessionStorage.setItem('token',token)}},doLogout(){this.token=''this.userInfo=nulllocalStorage.removeItem('token')sessionStorage.removeItem('token')}}})📁 项目结构
tower-crane-3d-visualization/ ├── build/ # 构建配置 ├── electron/ # Electron 主进程 │ ├── main.js # 主进程入口 │ └── preload.js # 预加载脚本 ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ │ └── TowerCrane/ # 3D塔吊组件 │ ├── Layout/ # 布局组件 │ │ └── MainLayout.vue # 主布局 │ ├── pages/ # 页面组件 │ │ ├── Login/ # 登录页 │ │ ├── Home/ # 首页模块 │ │ │ ├── Overview.vue # 总览页 │ │ │ └── FourViewLayout.vue │ │ └── ... │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ ├── styles/ # 全局样式 │ ├── utils/ # 工具函数 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── package.json ├── vite.config.js # Vite 配置 ├── electron-builder.yml # Electron 打包配置 └── LICENSE # 开源协议🚀 快速开始
环境要求
- Node.js >= 18.0.0
- npm >= 9.0.0
开发运行
# Web 开发模式npmrun dev# Electron 桌面端开发npmrun electron:dev打包构建
# 打包 Web 版本npmrun build# 打包桌面应用npmrun electron:build🎨 UI 设计亮点
赛博朋克风格配色
// 主题色 $primary-color: #00d4ff; // 科技蓝 $secondary-color: #7c3aed; // 紫色 $accent-color: #10b981; // 绿色 $warning-color: #f59e0b; // 警告黄 $danger-color: #ef4444; // 危险红 // 背景渐变 background: linear-gradient(135deg, #0a1628 0%, #1a0a2e 50%, #0f172a 100%); // 霓虹发光效果 box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.2), 0 0 60px rgba(0, 212, 255, 0.1);动画效果
/* 粒子浮动动画 */@keyframesfloat{0%, 100%{transform:translateY(0)rotate(0deg);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-100vh)rotate(720deg);opacity:0;}}/* 脉冲光效 */@keyframespulse-glow{0%, 100%{box-shadow:0 0 20pxrgba(0,212,255,0.3);}50%{box-shadow:0 0 40pxrgba(0,212,255,0.6);}}📦 Electron 桌面端配置
# electron-builder.ymlappId:com.smartsite.towercraneproductName:塔吊群3D可视化监控系统directories:buildResources:buildfiles:-'!**/.vscode/*'-'!src/*'-'!electron/*'win:executableName:塔吊群3D可视化监控系统icon:build/icon.icotarget:-nsismac:icon:build/icon.icnstarget:-dmglinux:target:-AppImage📄 开源协议
本项目采用CC BY-NC-SA 4.0协议开源：
- ✅ 可以自由使用、修改、分享
- ✅ 需要保留原作者署名
- ❌ 禁止商业用途
- 🔄 修改后的作品需使用相同协议
Copyright (c) 2024-2025 wuchen <3101296850@qq.com>🎉 总结
本项目展示了如何使用现代前端技术栈构建一个完整的工业级3D可视化监控系统。主要技术要点包括：
- Vue3 Composition API- 更好的代码组织和逻辑复用
- Three.js 3D渲染- 实现塔吊设备的三维可视化
- Pinia 状态管理- 统一管理应用状态
- Electron 跨平台- 一套代码多端部署
- Element Plus UI- 快速搭建企业级界面
如果这篇文章对你有帮助，欢迎⭐ Star和🍴 Fork！
有问题欢迎在评论区留言交流~ 🎄
相关文章推荐：
- Vue3 + Three.js 入门教程
- Electron 打包桌面应用完全指南
- Element Plus 组件库使用技巧
如需商业授权，请联系：3101296850@qq.com
