# DTW-Screen

**Repository Path**: chehl-0110/dtw-screen

## Basic Information

- **Project Name**: DTW-Screen
- **Description**: 本项目是一个基于 `Vue 3 + Vite + Three.js + ECharts` 的数字孪生可视化大屏示例，包含完整大屏布局、3D 园区场景、2D 图表看板以及多组件联动交互。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, JavaScript, Threejs, Echarts

## README

# 3D 数字孪生大屏（Vue3 + Vite + Three.js + ECharts）

本项目是一个基于 `Vue 3 + Vite + Three.js + ECharts` 的数字孪生可视化大屏示例，包含完整大屏布局、3D 园区场景、2D 图表看板以及多组件联动交互。

## 1. 项目特性

- 大屏化 UI 布局（头部、左中右三栏、信息卡片）
- Three.js 3D 园区场景（建筑、围栏、路灯、大门、露天屏）
- ECharts 多图表看板（柱状图、折线图、饼图、雷达图）
- 3D 与 2D 双向联动（点击建筑/图表切换区域状态）
- 露天屏广告播放（优先视频纹理，失败时字幕兜底）
- 可快速扩展为真实业务数据接入

## 2. 技术栈

- `Vue 3`：组件化与响应式状态管理
- `Vite 4`：开发与构建工具
- `Three.js`：3D 场景渲染
- `ECharts 5`：2D 统计图表

## 3. 目录结构

```text
DTW-Screen-gitee/
├─ public/
│  ├─ ad.mp4                 # 露天屏广告视频（可替换）
│  └─ vite.svg
├─ src/
│  ├─ components/
│  │  ├─ DigitalTwinScreen.vue   # 大屏主布局
│  │  ├─ Scene3D.vue             # Three.js 场景
│  │  └─ ChartPanel.vue          # 左侧图表面板
│  ├─ composables/
│  │  └─ useTwinLink.js          # 组件联动状态（选中区域）
│  ├─ data/
│  │  └─ zones.js                # 区域元数据
│  ├─ App.vue
│  └─ main.js
├─ index.html
├─ package.json
└─ vite.config.js
```

## 4. 快速开始

### 4.1 安装依赖

```bash
npm install
```

### 4.2 启动开发环境

```bash
npm run dev
```

### 4.3 生产构建

```bash
npm run build
```

### 4.4 预览构建结果

```bash
npm run preview
```

## 5. 交互说明

- 拖拽中间 3D 区域可旋转场景
- 点击建筑可选中/取消区域
- 左侧柱状图、饼图点击可触发区域联动
- 右侧“实时事件”点击可切换区域
- 选中区域后，图表与 3D 高亮状态同步变化

## 6. 关键模块说明

## `src/components/Scene3D.vue`

- 负责 Three.js 初始化、光照、相机、控制器与动画循环
- 构建园区建筑、围栏、路灯、大门与露天屏
- 处理射线拾取与建筑点击联动
- 管理露天屏视频纹理与字幕兜底逻辑

## `src/components/ChartPanel.vue`

- 负责能耗柱状图、负荷趋势折线图、设备状态饼图
- 响应选中区域并同步图表高亮/数据变化

## `src/components/DigitalTwinScreen.vue`

- 负责整体大屏布局与顶部时钟
- 负责右侧区域详情、事件列表、雷达图
- 通过 `provideTwinLink()` 向子组件提供联动状态

## 7. 配置与可定制项

### 7.1 建筑颜色（当前统一灰色）

在 `src/components/Scene3D.vue` 中：

- `BUILDING_GRAY`：建筑主色（目前统一为灰色）

### 7.2 区域数据

在 `src/data/zones.js` 中维护区域名称、能耗、负荷等数据，便于后续替换成接口数据。

### 7.3 露天屏广告

- 默认读取：`public/ad.mp4`
- 失败回退源：`public/ad.webm`（若存在）
- 可直接替换同名文件实现广告更新

## 8. 作者与日期

- 作者：chehl
- 日期：2026-04-13

## 9. 未来扩展建议

- 接入后端实时数据（WebSocket / SSE / REST）
- 建筑模型升级为 glTF/GLB（替换 BoxGeometry）
- 增加告警联动、轨迹回放、视频监控窗口
- 增加权限体系与多主题切换
- 增加性能分级（低配模式关闭部分特效）

## 10. 注意事项

- Three.js 与 ECharts 同屏渲染时，请关注 GPU 占用
- 大体量视频建议压缩编码，避免首屏加载慢
- 若浏览器自动播放策略限制，请确保视频静音并内联播放

## 11. License

仅用于学习与演示，可按实际业务需求二次开发。