文件上传
This commit is contained in:
17
.gitignore
vendored
Normal file
17
.gitignore
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.vscode/
|
||||
.idea/
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# 模型文件较大，不提交到git
|
||||
public/models/*.glb
|
||||
263
ANNOTATION_GUIDE.md
Normal file
263
ANNOTATION_GUIDE.md
Normal file
@@ -0,0 +1,263 @@
|
||||
# 模型标注配置指南
|
||||
|
||||
## 概述
|
||||
|
||||
本指南说明如何将3D模型的部件与检查项目（annotations）精确匹配，实现准确的标注定位。
|
||||
|
||||
## 方法一：使用调试组件查看模型结构
|
||||
|
||||
### 1. 启用调试模式
|
||||
|
||||
在 `ModelDetail.vue` 中使用 `ThreeViewerDebug` 组件并启用调试模式：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="model-detail">
|
||||
<three-viewer-debug
|
||||
:model-path="modelPath"
|
||||
:annotations="modelData.componentCheck"
|
||||
:debug-mode="true"
|
||||
@annotation-click="handleAnnotationClick"
|
||||
@model-loaded="handleModelLoaded"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThreeViewerDebug from '../components/ThreeViewerDebug.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ThreeViewerDebug
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2. 查看模型部件列表
|
||||
|
||||
启用调试模式后，右侧会显示调试面板，包含：
|
||||
- 模型中所有mesh的名称列表
|
||||
- 点击模型部件可查看其名称和坐标
|
||||
|
||||
### 3. 记录部件信息
|
||||
|
||||
1. 打开浏览器控制台（F12）
|
||||
2. 查看控制台输出的"模型部件列表"和"部件映射表"
|
||||
3. 点击模型上的部件，查看其名称和坐标
|
||||
4. 点击"复制坐标"按钮，将坐标复制到剪贴板
|
||||
|
||||
## 方法二：通过命名匹配（推荐）
|
||||
|
||||
### 自动匹配规则
|
||||
|
||||
组件会自动尝试匹配 `componentCheck` 中的 `name` 与模型mesh的名称：
|
||||
|
||||
1. **精确匹配**：mesh名称完全等于annotation名称
|
||||
2. **包含匹配**：mesh名称包含annotation名称，或反之
|
||||
3. **关键词匹配**：拆分annotation名称，匹配关键词
|
||||
|
||||
### 示例
|
||||
|
||||
如果模型中有以下mesh名称：
|
||||
```
|
||||
- 引线_001
|
||||
- 避雷器本体
|
||||
- 铭牌标识
|
||||
- 螺栓组件
|
||||
- 线夹装置
|
||||
- 绝缘罩_上
|
||||
- 绝缘罩_下
|
||||
```
|
||||
|
||||
data.json中的配置：
|
||||
```json
|
||||
{
|
||||
"componentCheck": [
|
||||
{ "name": "引线", "content": [...] }, // 匹配 "引线_001"
|
||||
{ "name": "避雷器与支撑件结构", "content": [...] }, // 匹配 "避雷器本体"
|
||||
{ "name": "铭牌", "content": [...] }, // 匹配 "铭牌标识"
|
||||
{ "name": "螺栓螺母", "content": [...] }, // 匹配 "螺栓组件"
|
||||
{ "name": "线夹", "content": [...] }, // 匹配 "线夹装置"
|
||||
{ "name": "绝缘罩", "content": [...] } // 匹配 "绝缘罩_上" 或 "绝缘罩_下"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 方法三：手动配置坐标
|
||||
|
||||
如果模型没有命名或命名不规范，可以手动配置坐标。
|
||||
|
||||
### 1. 在data.json中添加position字段
|
||||
|
||||
```json
|
||||
{
|
||||
"componentCheck": [
|
||||
{
|
||||
"name": "避雷器与支撑件结构",
|
||||
"position": { "x": 0, "y": 1.5, "z": 0 },
|
||||
"content": [...]
|
||||
},
|
||||
{
|
||||
"name": "引线",
|
||||
"position": { "x": 0.5, "y": 2.0, "z": 0.3 },
|
||||
"content": [...]
|
||||
},
|
||||
{
|
||||
"name": "铭牌",
|
||||
"position": { "x": -0.3, "y": 0.5, "z": 0.2 },
|
||||
"content": [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 修改组件以支持position配置
|
||||
|
||||
在 `createAnnotations()` 方法中添加：
|
||||
|
||||
```javascript
|
||||
createAnnotations() {
|
||||
this.annotations.forEach((annotation, index) => {
|
||||
let position = new THREE.Vector3();
|
||||
|
||||
// 优先使用配置的坐标
|
||||
if (annotation.position) {
|
||||
position.set(
|
||||
annotation.position.x,
|
||||
annotation.position.y,
|
||||
annotation.position.z
|
||||
);
|
||||
} else {
|
||||
// 否则尝试匹配mesh
|
||||
const mesh = this.findMeshByName(annotation.name);
|
||||
if (mesh) {
|
||||
mesh.getWorldPosition(position);
|
||||
// ...
|
||||
}
|
||||
}
|
||||
// ...
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## 获取坐标的步骤
|
||||
|
||||
### 使用调试模式
|
||||
|
||||
1. 启用 `debugMode="true"`
|
||||
2. 运行项目，打开模型详情页
|
||||
3. 点击模型上的部件
|
||||
4. 查看右侧调试面板显示的坐标
|
||||
5. 点击"复制坐标"按钮
|
||||
6. 将坐标粘贴到data.json的对应位置
|
||||
|
||||
### 使用控制台
|
||||
|
||||
1. 打开浏览器控制台（F12）
|
||||
2. 点击模型部件
|
||||
3. 查看控制台输出：
|
||||
```
|
||||
点击的部件: {
|
||||
name: "引线_001",
|
||||
position: { x: 0.523, y: 2.145, z: 0.312 }
|
||||
}
|
||||
```
|
||||
4. 复制坐标到data.json
|
||||
|
||||
## 完整示例
|
||||
|
||||
### data.json配置
|
||||
|
||||
```json
|
||||
{
|
||||
"modelName": "交流避雷器",
|
||||
"modelPath": "1",
|
||||
"componentCheck": [
|
||||
{
|
||||
"name": "避雷器与支撑件结构",
|
||||
"meshName": "避雷器本体",
|
||||
"position": { "x": 0, "y": 1.5, "z": 0 },
|
||||
"content": [
|
||||
"避雷器与支撑件并列结构...",
|
||||
"避雷器在本体失效或损坏后..."
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "引线",
|
||||
"meshName": "引线_001",
|
||||
"position": { "x": 0.5, "y": 2.0, "z": 0.3 },
|
||||
"content": [
|
||||
"不低于 80cm，直径不低于 16mm 的软铜线"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### ModelDetail.vue使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="model-detail">
|
||||
<!-- 开发阶段使用调试版本 -->
|
||||
<three-viewer-debug
|
||||
v-if="isDevelopment"
|
||||
:model-path="modelPath"
|
||||
:annotations="modelData.componentCheck"
|
||||
:debug-mode="true"
|
||||
@annotation-click="handleAnnotationClick"
|
||||
/>
|
||||
|
||||
<!-- 生产环境使用正式版本 -->
|
||||
<three-viewer
|
||||
v-else
|
||||
:model-path="modelPath"
|
||||
:annotations="modelData.componentCheck"
|
||||
@annotation-click="handleAnnotationClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDevelopment: process.env.NODE_ENV === 'development'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **坐标系统**：Three.js使用右手坐标系，Y轴向上
|
||||
2. **模型居中**：组件会自动将模型居中，坐标相对于模型中心
|
||||
3. **标注高度**：标注会自动放置在部件上方约0.3单位处
|
||||
4. **命名规范**：建议在建模时为重要部件命名，便于自动匹配
|
||||
5. **性能考虑**：过多的标注可能影响性能，建议控制在10个以内
|
||||
|
||||
## 故障排查
|
||||
|
||||
### 标注不显示
|
||||
- 检查 `labelRenderer.render()` 是否在动画循环中调用
|
||||
- 检查标注位置是否在相机视野内
|
||||
- 检查CSS样式是否正确
|
||||
|
||||
### 无法匹配部件
|
||||
- 使用调试模式查看模型部件列表
|
||||
- 检查mesh是否有命名
|
||||
- 考虑使用手动配置坐标
|
||||
|
||||
### 高亮不生效
|
||||
- 检查是否正确传递mesh对象
|
||||
- 确认OutlinePass已正确初始化
|
||||
- 查看控制台是否有错误信息
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `src/components/ThreeViewerDebug.vue` - 调试版本组件
|
||||
- `src/components/ThreeViewer.vue` - 生产版本组件
|
||||
- `src/data/data.json` - 模型数据配置
|
||||
- `src/views/ModelDetail.vue` - 详情页面
|
||||
79
QUICKSTART.md
Normal file
79
QUICKSTART.md
Normal file
@@ -0,0 +1,79 @@
|
||||
# 快速启动指南
|
||||
|
||||
## 第一步：安装依赖
|
||||
|
||||
```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 - 模型文件说明
|
||||
7864
package-lock.json
generated
Normal file
7864
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "vue-model-review",
|
||||
"version": "1.0.0",
|
||||
"description": "Vue2 3D Model Review Application",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^2.15.13",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.3",
|
||||
"three": "^0.124.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user