Vue3 + Three.js + Electron 打造炫酷塔吊群3D可视化监控系统

🏗️ Vue3 + Three.js + Electron 打造炫酷塔吊群3D可视化监控系统

🎄 圣诞节特别分享！一个基于 Vue3 全家桶 + Three.js 实现的智慧工地塔吊群三维可视化监控平台，支持 Web 端和桌面端双端部署！

📝 前言

在智慧工地的建设中，塔吊作为关键的大型设备，其安全监控尤为重要。传统的二维监控界面已无法满足现代化工地的管理需求，本文将分享一个基于Vue3 + Three.js + Electron技术栈打造的塔吊群3D可视化监控系统。

项目亮点：

• 🎨 科技感十足的赛博朋克风格UI设计
• 🎮 Three.js 实现的3D塔吊模型实时监控
• 📊 丰富的数据可视化图表
• 🖥️ 支持打包为桌面应用（Windows/Mac/Linux）
• 🔐 完整的登录认证系统

🛠️ 技术栈

🎯 功能特性

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可视化监控系统。主要技术要点包括：

1. Vue3 Composition API- 更好的代码组织和逻辑复用
2. Three.js 3D渲染- 实现塔吊设备的三维可视化
3. Pinia 状态管理- 统一管理应用状态
4. Electron 跨平台- 一套代码多端部署
5. Element Plus UI- 快速搭建企业级界面

如果这篇文章对你有帮助，欢迎⭐ Star和🍴 Fork！

有问题欢迎在评论区留言交流~ 🎄

相关文章推荐：

• Vue3 + Three.js 入门教程
• Electron 打包桌面应用完全指南
• Element Plus 组件库使用技巧

如需商业授权，请联系：3101296850@qq.com