🏗️ 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 * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x0a1628)

// 创建相机
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(50, 50, 50)

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
renderer.shadowMap.enabled = true

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

// 渲染循环
function animate() {
  requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}
animate()

3. 路由守卫实现登录验证

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token') || sessionStorage.getItem('token')
  
  if (to.path === '/login') {
    next()
  } else if (!token) {
    next('/login')
  } else {
    next()
  }
})

4. Pinia 状态管理

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: ''
  }),
  
  getters: {
    isLoggedIn: (state) => !!state.token
  },
  
  actions: {
    setLoginState({ username, remember }) {
      const token = 'demo_token_' + Date.now()
      this.token = token
      this.userInfo = { username }
      
      if (remember) {
        localStorage.setItem('token', token)
      } else {
        sessionStorage.setItem('token', token)
      }
    },
    
    doLogout() {
      this.token = ''
      this.userInfo = null
      localStorage.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 开发模式
npm run dev

# Electron 桌面端开发
npm run electron:dev

打包构建

# 打包 Web 版本
npm run build

# 打包桌面应用
npm run 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);

动画效果

/* 粒子浮动动画 */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* 脉冲光效 */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}

---

📦 Electron 桌面端配置

# electron-builder.yml
appId: com.smartsite.towercrane
productName: 塔吊群3D可视化监控系统
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron/*'
win:
  executableName: 塔吊群3D可视化监控系统
  icon: build/icon.ico
  target:
    - nsis
mac:
  icon: build/icon.icns
  target:
    - dmg
linux:
  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