80 lines
2.0 KiB
Markdown
80 lines
2.0 KiB
Markdown
# 快速启动指南
|
||
|
||
## 第一步：安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
## 第二步：准备GLB模型文件
|
||
|
||
将您的GLB模型文件放入 `public/models/` 目录，文件名需要与 `src/data/data.json` 中的 `modelName` 对应。
|
||
|
||
例如：
|
||
- `交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
|
||
- `交流棒形悬式复合绝缘子，FXBW-10/70.glb`
|
||
- `10kV 三相隔离开关.glb`
|
||
|
||
**注意：** 如果暂时没有模型文件，系统会显示加载失败提示，但不影响其他功能测试。
|
||
|
||
## 第三步：启动开发服务器
|
||
|
||
```bash
|
||
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. 刷新页面即可看到新模型
|
||
|
||
## 生产部署
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建完成后，将 `dist` 目录部署到Web服务器即可。
|
||
|
||
## 技术支持
|
||
|
||
如有问题，请查看：
|
||
- README.md - 完整文档
|
||
- public/models/README.md - 模型文件说明
|