Vue2 模型检测系统

一个基于 Vue2 + Three.js 的3D模型检测系统，支持PC端和移动端自适应。

功能特性

• 📱 响应式设计，自动适配PC端和移动端
• 🎨 Three.js 3D模型渲染
• 🏷️ 模型标注打点系统
• 📊 检测内容表格展示
• 🎯 点击标注高亮显示
• 📋 三类检查内容：总体外观、主要参数、关键元器件

技术栈

• Vue 2.6.14
• Vue Router 3.5.3
• Three.js 0.150.0
• Element UI 2.15.13

项目结构

vue-model-review/
├── public/
│   ├── index.html
│   └── models/              # GLB模型文件目录
│       ├── 交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb
│       ├── 交流棒形悬式复合绝缘子，FXBW-10/70.glb
│       └── 10kV 三相隔离开关.glb
├── src/
│   ├── components/
│   │   ├── ThreeViewer.vue  # 3D模型查看器
│   │   └── CheckTable.vue   # 检测表格组件
│   ├── views/
│   │   ├── ModelList.vue    # 模型列表页
│   │   └── ModelDetail.vue  # 模型详情页
│   ├── router/
│   │   └── index.js         # 路由配置
│   ├── data/
│   │   └── data.json        # 模型数据
│   ├── App.vue
│   └── main.js
├── package.json
├── vue.config.js
└── README.md

安装依赖

npm install

开发运行

npm run serve

访问 http://localhost:8080

生产构建

npm run build

使用说明

1. 准备GLB模型文件

将GLB模型文件放置在 public/models/ 目录下，文件名需与 data.json 中的 modelName 字段对应。

例如：交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb

2. 配置模型数据

编辑 src/data/data.json，添加或修改模型数据：

[
  {
    "modelName": "模型名称",
    "appearanceCheck": [...],
    "mainDataCheck": [...],
    "componentCheck": [...]
  }
]

3. 页面布局

PC端布局

• 顶部：模型名称
• 左侧：3D模型展示
• 右侧：检测内容表格

移动端布局

• 顶部：模型名称
• 中间：3D模型展示
• 底部：检测内容表格

4. 交互功能

• 点击3D模型上的标注点，会高亮对应部件
• PC端：右侧表格自动展开对应检查项
• 移动端：弹出抽屉显示检查要求

注意事项

1. GLB模型文件需要放在 public/models/ 目录下
2. 模型文件名必须与 data.json 中的 modelName 完全一致
3. 标注点位置采用圆形分布算法自动计算
4. 移动端判断阈值为屏幕宽度 768px

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

系统要求

• Node.js >= 14.x
• npm >= 6.x

推荐使用 Node.js 16.x 或更高版本以获得最佳兼容性。

License

MIT