# digitaltwin

**Repository Path**: BaudLab/digitaltwin

## Basic Information

- **Project Name**: digitaltwin
- **Description**: three.js+Vue数字孪生项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-09
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 除胶车间数字孪生平台

<p align="center">
  <img src="./docs/preview.png" alt="项目预览" width="100%">
</p>

## 📖 项目介绍

除胶车间数字孪生平台是一个基于 Vue 3 + Three.js 构建的工业级3D可视化监控系统。该平台实时展示除胶车间的设备运行状态、能耗数据和生产效率，为工厂管理提供直观的数据支撑。

### ✨ 核心功能

- **3D 场景可视化**：真实还原除胶车间场景，包含除胶炉、机械臂、擦拭设备等28个3D模型
- **实时数据监控**：展示设备温度、压力、运行时长等关键参数
- **数据面板看板**：
  - 📊 项目信息 - 电压等级、变压器容量、储能容量等基础信息
  - ⚡ 用电情况分析 - 雷达图展示各炉用电分布
  - 🔋 能耗分析 - 饼图展示各设备能耗占比
  - 📈 设备效率 - 柱状图展示设备运行效率趋势
  - 🏭 设备状态 - 实时监控设备运行状态和负载
  - 📉 电力需求趋势 - 折线图展示24小时电力需求变化
  - 🎯 运行监控 - 漏斗图展示各项运行指标
- **场景标签**：3D场景中的浮动数据面板，实时跟踪设备位置
- **自动漫游**：相机自动环绕场景漫游，全方位展示车间

### 🛠️ 技术栈

| 技术 | 说明 |
|------|------|
| Vue 3 | 渐进式 JavaScript 框架 |
| TypeScript | 类型安全的 JavaScript 超集 |
| Vite | 下一代前端构建工具 |
| Three.js | 3D 图形渲染库 |
| ECharts | 数据可视化图表库 |
| Composition API | Vue 3 组合式 API |

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0

### 安装依赖

```bash
# 克隆项目
git clone https://gitee.com/HelioStudio/digitaltwin.git

# 进入项目目录
cd digitaltwin

# 安装依赖
npm install
```

### 开发模式

```bash
npm run dev
```

启动后访问 http://localhost:5173

### 生产构建

```bash
# 构建生产版本
npm run build

# 本地预览生产构建
npm run preview
```

## 📁 项目结构

```
digitaltwin/
├── public/
│   └── 除胶场景包/          # 3D 模型文件 (GLB格式)
├── src/
│   ├── components/
│   │   ├── ThreeScene.vue       # 3D 场景渲染组件
│   │   ├── DashboardOverlay.vue # 仪表盘布局组件
│   │   ├── ControlBar.vue       # 操作栏组件
│   │   ├── dashboard/           # 数据面板组件
│   │   │   ├── HeaderBar.vue        # 顶部状态栏
│   │   │   ├── ProjectInfo.vue      # 项目信息
│   │   │   ├── EnergyAnalysis.vue   # 能耗分析
│   │   │   ├── EquipmentStatus.vue  # 设备状态
│   │   │   ├── ElectricityUsage.vue # 用电分析
│   │   │   ├── EquipmentEfficiency.vue # 设备效率
│   │   │   ├── PowerTrend.vue       # 电力趋势
│   │   │   └── RunningMonitor.vue   # 运行监控
│   │   └── scene/
│   │       └── SceneLabels.vue  # 3D场景标签
│   ├── App.vue              # 根组件
│   └── main.ts              # 入口文件
├── docs/
│   └── preview.png          # 项目预览图
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
```

## 🎮 操作指南

### 3D 场景交互

- **旋转视角**：鼠标左键拖拽
- **缩放场景**：鼠标滚轮
- **平移视角**：鼠标右键拖拽

### 控制面板

- **标签按钮**：显示/隐藏设备信息标签
- **漫游按钮**：开启/关闭自动漫游模式

### 场景标签

- 点击标签标题可折叠/展开详细信息
- 折叠后显示为圆环指示器

## 🔧 配置说明

### 3D 模型

模型文件位于 `public/除胶场景包/` 目录，支持的模型包括：
- 除胶炉 (4个)
- 机械臂及控制器
- 上线/下线滑轨
- 擦拭设备
- 电脑操作台
- 金属围栏
- 车间地板等

### 主题颜色

项目使用统一的颜色主题：

| 颜色 | 用途 |
|------|------|
| `#222127` | 卡片背景 |
| `#36363e` | 3D场景背景 |
| `#2dbead` | 主题色/强调色 |
| `#b2b1b8` | 次要文字 |
| `#e8e8ea` | 主要文字 |

## 📦 部署

### Nginx 部署

1. 构建生产版本：
```bash
npm run build
```

2. 将 `dist` 目录内容复制到 Nginx 服务器

3. Nginx 配置示例：
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    root /var/www/digitaltwin;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|glb|gltf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

### Docker 部署

```dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

```bash
# 构建镜像
docker build -t digitaltwin .

# 运行容器
docker run -d -p 8080:80 digitaltwin
```

## 📄 许可证

MIT License © 2024 HelioStudio

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系我们

- Gitee: [https://gitee.com/HelioStudio/digitaltwin](https://gitee.com/HelioStudio/digitaltwin)

3. Build for production:
   ```bash
   npm run build
   ```

## Project Structure

- `src/components/ThreeScene.vue`: The main 3D scene component.
- `src/App.vue`: The root component.