vue-model-review/QUICKSTART.md

快速启动指南

第一步：安装依赖

npm install

第二步：准备GLB模型文件

将您的GLB模型文件放入 public/models/ 目录，文件名需要与 src/data/data.json 中的 modelName 对应。

例如：

• 交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb
• 交流棒形悬式复合绝缘子，FXBW-10/70.glb
• 10kV 三相隔离开关.glb

注意： 如果暂时没有模型文件，系统会显示加载失败提示，但不影响其他功能测试。

第三步：启动开发服务器

npm run serve

浏览器会自动打开 http://localhost:8080

功能测试

1. 列表页

• 查看所有模型列表
• 点击任意模型卡片进入详情页

2. 详情页（PC端）

• 左侧：3D模型展示区
• 右侧：检测内容表格
• 点击模型上的标注点，右侧表格会自动高亮对应项

3. 详情页（移动端）

• 顶部：模型名称
• 中间：3D模型展示区
• 底部：检测内容表格
• 点击标注点会弹出抽屉显示详细信息

4. 测试响应式

• 调整浏览器窗口大小
• 宽度 ≤ 768px 时切换为移动端布局
• 宽度 > 768px 时切换为PC端布局

常见问题

Q: 模型加载失败？

A: 请确认：

1. GLB文件已放入 public/models/ 目录
2. 文件名与 data.json 中的 modelName 完全一致
3. 文件格式是 .glb（不是 .gltf）

Q: 标注点位置不准确？

A: 标注点位置采用圆形分布算法自动计算，可以在 src/components/ThreeViewer.vue 的 createAnnotations 方法中调整坐标。

Q: 如何添加新模型？

A:

1. 将GLB文件放入 public/models/
2. 在 src/data/data.json 中添加对应的数据配置
3. 刷新页面即可看到新模型

生产部署

npm run build

构建完成后，将 dist 目录部署到Web服务器即可。

技术支持

如有问题，请查看：

• README.md - 完整文档
• public/models/README.md - 模型文件说明