shanke/vue-model-review

Fork 0

Files

cao_yi_min 4ac99bb417 暂存本地

2026-04-27 09:57:00 +08:00

2.9 KiB

Raw Blame History

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端：右侧表格自动展开对应检查项
移动端：弹出抽屉显示检查要求

注意事项

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

浏览器支持

Chrome (推荐)
Firefox
Safari
Edge

系统要求

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

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

License

MIT

2.9 KiB Raw Blame History Unescape Escape