模型文件

.gitignore

@@ -1,17 +1,17 @@
-node_modules/
+node_modules/
-dist/
+dist/
-.DS_Store
+.DS_Store
-*.log
+*.log
-npm-debug.log*
+npm-debug.log*
-yarn-debug.log*
+yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
-.vscode/
+.vscode/
-.idea/
+.idea/
-*.suo
+*.suo
-*.ntvs*
+*.ntvs*
-*.njsproj
+*.njsproj
-*.sln
+*.sln
-*.sw?
+*.sw?
-
+
-# 模型文件较大，不提交到git
+# 模型文件较大，不提交到git
-public/models/*.glb
+public/models/*.glb

ANNOTATION_GUIDE.md

@@ -1,263 +1,263 @@
-# 模型标注配置指南
+# 模型标注配置指南
-
+
-## 概述
+## 概述
-
+
-本指南说明如何将3D模型的部件与检查项目（annotations）精确匹配，实现准确的标注定位。
+本指南说明如何将3D模型的部件与检查项目（annotations）精确匹配，实现准确的标注定位。
-
+
-## 方法一：使用调试组件查看模型结构
+## 方法一：使用调试组件查看模型结构
-
+
-### 1. 启用调试模式
+### 1. 启用调试模式
-
+
-在 `ModelDetail.vue` 中使用 `ThreeViewerDebug` 组件并启用调试模式：
+在 `ModelDetail.vue` 中使用 `ThreeViewerDebug` 组件并启用调试模式：
-
+
-```vue
+```vue
-<template>
+<template>
-  <div class="model-detail">
+  <div class="model-detail">
-    <three-viewer-debug
+    <three-viewer-debug
-      :model-path="modelPath"
+      :model-path="modelPath"
-      :annotations="modelData.componentCheck"
+      :annotations="modelData.componentCheck"
-      :debug-mode="true"
+      :debug-mode="true"
-      @annotation-click="handleAnnotationClick"
+      @annotation-click="handleAnnotationClick"
-      @model-loaded="handleModelLoaded"
+      @model-loaded="handleModelLoaded"
-    />
+    />
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-import ThreeViewerDebug from '../components/ThreeViewerDebug.vue'
+import ThreeViewerDebug from '../components/ThreeViewerDebug.vue'
-
+
-export default {
+export default {
-  components: {
+  components: {
-    ThreeViewerDebug
+    ThreeViewerDebug
-  }
+  }
-}
+}
-</script>
+</script>
-```
+```
-
+
-### 2. 查看模型部件列表
+### 2. 查看模型部件列表
-
+
-启用调试模式后，右侧会显示调试面板，包含：
+启用调试模式后，右侧会显示调试面板，包含：
-- 模型中所有mesh的名称列表
+- 模型中所有mesh的名称列表
-- 点击模型部件可查看其名称和坐标
+- 点击模型部件可查看其名称和坐标
-
+
-### 3. 记录部件信息
+### 3. 记录部件信息
-
+
-1. 打开浏览器控制台（F12）
+1. 打开浏览器控制台（F12）
-2. 查看控制台输出的"模型部件列表"和"部件映射表"
+2. 查看控制台输出的"模型部件列表"和"部件映射表"
-3. 点击模型上的部件，查看其名称和坐标
+3. 点击模型上的部件，查看其名称和坐标
-4. 点击"复制坐标"按钮，将坐标复制到剪贴板
+4. 点击"复制坐标"按钮，将坐标复制到剪贴板
-
+
-## 方法二：通过命名匹配（推荐）
+## 方法二：通过命名匹配（推荐）
-
+
-### 自动匹配规则
+### 自动匹配规则
-
+
-组件会自动尝试匹配 `componentCheck` 中的 `name` 与模型mesh的名称：
+组件会自动尝试匹配 `componentCheck` 中的 `name` 与模型mesh的名称：
-
+
-1. **精确匹配**：mesh名称完全等于annotation名称
+1. **精确匹配**：mesh名称完全等于annotation名称
-2. **包含匹配**：mesh名称包含annotation名称，或反之
+2. **包含匹配**：mesh名称包含annotation名称，或反之
-3. **关键词匹配**：拆分annotation名称，匹配关键词
+3. **关键词匹配**：拆分annotation名称，匹配关键词
-
+
-### 示例
+### 示例
-
+
-如果模型中有以下mesh名称：
+如果模型中有以下mesh名称：
-```
+```
-- 引线_001
+- 引线_001
-- 避雷器本体
+- 避雷器本体
-- 铭牌标识
+- 铭牌标识
-- 螺栓组件
+- 螺栓组件
-- 线夹装置
+- 线夹装置
-- 绝缘罩_上
+- 绝缘罩_上
-- 绝缘罩_下
+- 绝缘罩_下
-```
+```
-
+
-data.json中的配置：
+data.json中的配置：
-```json
+```json
-{
+{
-  "componentCheck": [
+  "componentCheck": [
-    { "name": "引线", "content": [...] },           // 匹配 "引线_001"
+    { "name": "引线", "content": [...] },           // 匹配 "引线_001"
-    { "name": "避雷器与支撑件结构", "content": [...] }, // 匹配 "避雷器本体"
+    { "name": "避雷器与支撑件结构", "content": [...] }, // 匹配 "避雷器本体"
-    { "name": "铭牌", "content": [...] },           // 匹配 "铭牌标识"
+    { "name": "铭牌", "content": [...] },           // 匹配 "铭牌标识"
-    { "name": "螺栓螺母", "content": [...] },       // 匹配 "螺栓组件"
+    { "name": "螺栓螺母", "content": [...] },       // 匹配 "螺栓组件"
-    { "name": "线夹", "content": [...] },           // 匹配 "线夹装置"
+    { "name": "线夹", "content": [...] },           // 匹配 "线夹装置"
-    { "name": "绝缘罩", "content": [...] }          // 匹配 "绝缘罩_上" 或 "绝缘罩_下"
+    { "name": "绝缘罩", "content": [...] }          // 匹配 "绝缘罩_上" 或 "绝缘罩_下"
-  ]
+  ]
-}
+}
-```
+```
-
+
-## 方法三：手动配置坐标
+## 方法三：手动配置坐标
-
+
-如果模型没有命名或命名不规范，可以手动配置坐标。
+如果模型没有命名或命名不规范，可以手动配置坐标。
-
+
-### 1. 在data.json中添加position字段
+### 1. 在data.json中添加position字段
-
+
-```json
+```json
-{
+{
-  "componentCheck": [
+  "componentCheck": [
-    {
+    {
-      "name": "避雷器与支撑件结构",
+      "name": "避雷器与支撑件结构",
-      "position": { "x": 0, "y": 1.5, "z": 0 },
+      "position": { "x": 0, "y": 1.5, "z": 0 },
-      "content": [...]
+      "content": [...]
-    },
+    },
-    {
+    {
-      "name": "引线",
+      "name": "引线",
-      "position": { "x": 0.5, "y": 2.0, "z": 0.3 },
+      "position": { "x": 0.5, "y": 2.0, "z": 0.3 },
-      "content": [...]
+      "content": [...]
-    },
+    },
-    {
+    {
-      "name": "铭牌",
+      "name": "铭牌",
-      "position": { "x": -0.3, "y": 0.5, "z": 0.2 },
+      "position": { "x": -0.3, "y": 0.5, "z": 0.2 },
-      "content": [...]
+      "content": [...]
-    }
+    }
-  ]
+  ]
-}
+}
-```
+```
-
+
-### 2. 修改组件以支持position配置
+### 2. 修改组件以支持position配置
-
+
-在 `createAnnotations()` 方法中添加：
+在 `createAnnotations()` 方法中添加：
-
+
-```javascript
+```javascript
-createAnnotations() {
+createAnnotations() {
-  this.annotations.forEach((annotation, index) => {
+  this.annotations.forEach((annotation, index) => {
-    let position = new THREE.Vector3();
+    let position = new THREE.Vector3();
-    
+    
-    // 优先使用配置的坐标
+    // 优先使用配置的坐标
-    if (annotation.position) {
+    if (annotation.position) {
-      position.set(
+      position.set(
-        annotation.position.x,
+        annotation.position.x,
-        annotation.position.y,
+        annotation.position.y,
-        annotation.position.z
+        annotation.position.z
-      );
+      );
-    } else {
+    } else {
-      // 否则尝试匹配mesh
+      // 否则尝试匹配mesh
-      const mesh = this.findMeshByName(annotation.name);
+      const mesh = this.findMeshByName(annotation.name);
-      if (mesh) {
+      if (mesh) {
-        mesh.getWorldPosition(position);
+        mesh.getWorldPosition(position);
-        // ...
+        // ...
-      }
+      }
-    }
+    }
-    // ...
+    // ...
-  });
+  });
-}
+}
-```
+```
-
+
-## 获取坐标的步骤
+## 获取坐标的步骤
-
+
-### 使用调试模式
+### 使用调试模式
-
+
-1. 启用 `debugMode="true"`
+1. 启用 `debugMode="true"`
-2. 运行项目，打开模型详情页
+2. 运行项目，打开模型详情页
-3. 点击模型上的部件
+3. 点击模型上的部件
-4. 查看右侧调试面板显示的坐标
+4. 查看右侧调试面板显示的坐标
-5. 点击"复制坐标"按钮
+5. 点击"复制坐标"按钮
-6. 将坐标粘贴到data.json的对应位置
+6. 将坐标粘贴到data.json的对应位置
-
+
-### 使用控制台
+### 使用控制台
-
+
-1. 打开浏览器控制台（F12）
+1. 打开浏览器控制台（F12）
-2. 点击模型部件
+2. 点击模型部件
-3. 查看控制台输出：
+3. 查看控制台输出：
-   ```
+   ```
-   点击的部件: {
+   点击的部件: {
-     name: "引线_001",
+     name: "引线_001",
-     position: { x: 0.523, y: 2.145, z: 0.312 }
+     position: { x: 0.523, y: 2.145, z: 0.312 }
-   }
+   }
-   ```
+   ```
-4. 复制坐标到data.json
+4. 复制坐标到data.json
-
+
-## 完整示例
+## 完整示例
-
+
-### data.json配置
+### data.json配置
-
+
-```json
+```json
-{
+{
-  "modelName": "交流避雷器",
+  "modelName": "交流避雷器",
-  "modelPath": "1",
+  "modelPath": "1",
-  "componentCheck": [
+  "componentCheck": [
-    {
+    {
-      "name": "避雷器与支撑件结构",
+      "name": "避雷器与支撑件结构",
-      "meshName": "避雷器本体",
+      "meshName": "避雷器本体",
-      "position": { "x": 0, "y": 1.5, "z": 0 },
+      "position": { "x": 0, "y": 1.5, "z": 0 },
-      "content": [
+      "content": [
-        "避雷器与支撑件并列结构...",
+        "避雷器与支撑件并列结构...",
-        "避雷器在本体失效或损坏后..."
+        "避雷器在本体失效或损坏后..."
-      ]
+      ]
-    },
+    },
-    {
+    {
-      "name": "引线",
+      "name": "引线",
-      "meshName": "引线_001",
+      "meshName": "引线_001",
-      "position": { "x": 0.5, "y": 2.0, "z": 0.3 },
+      "position": { "x": 0.5, "y": 2.0, "z": 0.3 },
-      "content": [
+      "content": [
-        "不低于 80cm，直径不低于 16mm 的软铜线"
+        "不低于 80cm，直径不低于 16mm 的软铜线"
-      ]
+      ]
-    }
+    }
-  ]
+  ]
-}
+}
-```
+```
-
+
-### ModelDetail.vue使用
+### ModelDetail.vue使用
-
+
-```vue
+```vue
-<template>
+<template>
-  <div class="model-detail">
+  <div class="model-detail">
-    <!-- 开发阶段使用调试版本 -->
+    <!-- 开发阶段使用调试版本 -->
-    <three-viewer-debug
+    <three-viewer-debug
-      v-if="isDevelopment"
+      v-if="isDevelopment"
-      :model-path="modelPath"
+      :model-path="modelPath"
-      :annotations="modelData.componentCheck"
+      :annotations="modelData.componentCheck"
-      :debug-mode="true"
+      :debug-mode="true"
-      @annotation-click="handleAnnotationClick"
+      @annotation-click="handleAnnotationClick"
-    />
+    />
-    
+    
-    <!-- 生产环境使用正式版本 -->
+    <!-- 生产环境使用正式版本 -->
-    <three-viewer
+    <three-viewer
-      v-else
+      v-else
-      :model-path="modelPath"
+      :model-path="modelPath"
-      :annotations="modelData.componentCheck"
+      :annotations="modelData.componentCheck"
-      @annotation-click="handleAnnotationClick"
+      @annotation-click="handleAnnotationClick"
-    />
+    />
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {
+export default {
-  data() {
+  data() {
-    return {
+    return {
-      isDevelopment: process.env.NODE_ENV === 'development'
+      isDevelopment: process.env.NODE_ENV === 'development'
-    }
+    }
-  }
+  }
-}
+}
-</script>
+</script>
-```
+```
-
+
-## 注意事项
+## 注意事项
-
+
-1. **坐标系统**：Three.js使用右手坐标系，Y轴向上
+1. **坐标系统**：Three.js使用右手坐标系，Y轴向上
-2. **模型居中**：组件会自动将模型居中，坐标相对于模型中心
+2. **模型居中**：组件会自动将模型居中，坐标相对于模型中心
-3. **标注高度**：标注会自动放置在部件上方约0.3单位处
+3. **标注高度**：标注会自动放置在部件上方约0.3单位处
-4. **命名规范**：建议在建模时为重要部件命名，便于自动匹配
+4. **命名规范**：建议在建模时为重要部件命名，便于自动匹配
-5. **性能考虑**：过多的标注可能影响性能，建议控制在10个以内
+5. **性能考虑**：过多的标注可能影响性能，建议控制在10个以内
-
+
-## 故障排查
+## 故障排查
-
+
-### 标注不显示
+### 标注不显示
-- 检查 `labelRenderer.render()` 是否在动画循环中调用
+- 检查 `labelRenderer.render()` 是否在动画循环中调用
-- 检查标注位置是否在相机视野内
+- 检查标注位置是否在相机视野内
-- 检查CSS样式是否正确
+- 检查CSS样式是否正确
-
+
-### 无法匹配部件
+### 无法匹配部件
-- 使用调试模式查看模型部件列表
+- 使用调试模式查看模型部件列表
-- 检查mesh是否有命名
+- 检查mesh是否有命名
-- 考虑使用手动配置坐标
+- 考虑使用手动配置坐标
-
+
-### 高亮不生效
+### 高亮不生效
-- 检查是否正确传递mesh对象
+- 检查是否正确传递mesh对象
-- 确认OutlinePass已正确初始化
+- 确认OutlinePass已正确初始化
-- 查看控制台是否有错误信息
+- 查看控制台是否有错误信息
-
+
-## 相关文件
+## 相关文件
-
+
-- `src/components/ThreeViewerDebug.vue` - 调试版本组件
+- `src/components/ThreeViewerDebug.vue` - 调试版本组件
-- `src/components/ThreeViewer.vue` - 生产版本组件
+- `src/components/ThreeViewer.vue` - 生产版本组件
-- `src/data/data.json` - 模型数据配置
+- `src/data/data.json` - 模型数据配置
-- `src/views/ModelDetail.vue` - 详情页面
+- `src/views/ModelDetail.vue` - 详情页面

QUICKSTART.md

@@ -1,79 +1,79 @@
-# 快速启动指南
+# 快速启动指南
-
+
-## 第一步：安装依赖
+## 第一步：安装依赖
-
+
-```bash
+```bash
-npm install
+npm install
-```
+```
-
+
-## 第二步：准备GLB模型文件
+## 第二步：准备GLB模型文件
-
+
-将您的GLB模型文件放入 `public/models/` 目录，文件名需要与 `src/data/data.json` 中的 `modelName` 对应。
+将您的GLB模型文件放入 `public/models/` 目录，文件名需要与 `src/data/data.json` 中的 `modelName` 对应。
-
+
-例如：
+例如：
-- `交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
+- `交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
-- `交流棒形悬式复合绝缘子，FXBW-10/70.glb`
+- `交流棒形悬式复合绝缘子，FXBW-10/70.glb`
-- `10kV 三相隔离开关.glb`
+- `10kV 三相隔离开关.glb`
-
+
-**注意：** 如果暂时没有模型文件，系统会显示加载失败提示，但不影响其他功能测试。
+**注意：** 如果暂时没有模型文件，系统会显示加载失败提示，但不影响其他功能测试。
-
+
-## 第三步：启动开发服务器
+## 第三步：启动开发服务器
-
+
-```bash
+```bash
-npm run serve
+npm run serve
-```
+```
-
+
-浏览器会自动打开 http://localhost:8080
+浏览器会自动打开 http://localhost:8080
-
+
-## 功能测试
+## 功能测试
-
+
-### 1. 列表页
+### 1. 列表页
-- 查看所有模型列表
+- 查看所有模型列表
-- 点击任意模型卡片进入详情页
+- 点击任意模型卡片进入详情页
-
+
-### 2. 详情页（PC端）
+### 2. 详情页（PC端）
-- 左侧：3D模型展示区
+- 左侧：3D模型展示区
-- 右侧：检测内容表格
+- 右侧：检测内容表格
-- 点击模型上的标注点，右侧表格会自动高亮对应项
+- 点击模型上的标注点，右侧表格会自动高亮对应项
-
+
-### 3. 详情页（移动端）
+### 3. 详情页（移动端）
-- 顶部：模型名称
+- 顶部：模型名称
-- 中间：3D模型展示区
+- 中间：3D模型展示区
-- 底部：检测内容表格
+- 底部：检测内容表格
-- 点击标注点会弹出抽屉显示详细信息
+- 点击标注点会弹出抽屉显示详细信息
-
+
-### 4. 测试响应式
+### 4. 测试响应式
-- 调整浏览器窗口大小
+- 调整浏览器窗口大小
-- 宽度 ≤ 768px 时切换为移动端布局
+- 宽度 ≤ 768px 时切换为移动端布局
-- 宽度 > 768px 时切换为PC端布局
+- 宽度 > 768px 时切换为PC端布局
-
+
-## 常见问题
+## 常见问题
-
+
-### Q: 模型加载失败？
+### Q: 模型加载失败？
-A: 请确认：
+A: 请确认：
-1. GLB文件已放入 `public/models/` 目录
+1. GLB文件已放入 `public/models/` 目录
-2. 文件名与 data.json 中的 modelName 完全一致
+2. 文件名与 data.json 中的 modelName 完全一致
-3. 文件格式是 .glb（不是 .gltf）
+3. 文件格式是 .glb（不是 .gltf）
-
+
-### Q: 标注点位置不准确？
+### Q: 标注点位置不准确？
-A: 标注点位置采用圆形分布算法自动计算，可以在 `src/components/ThreeViewer.vue` 的 `createAnnotations` 方法中调整坐标。
+A: 标注点位置采用圆形分布算法自动计算，可以在 `src/components/ThreeViewer.vue` 的 `createAnnotations` 方法中调整坐标。
-
+
-### Q: 如何添加新模型？
+### Q: 如何添加新模型？
-A: 
+A: 
-1. 将GLB文件放入 `public/models/`
+1. 将GLB文件放入 `public/models/`
-2. 在 `src/data/data.json` 中添加对应的数据配置
+2. 在 `src/data/data.json` 中添加对应的数据配置
-3. 刷新页面即可看到新模型
+3. 刷新页面即可看到新模型
-
+
-## 生产部署
+## 生产部署
-
+
-```bash
+```bash
-npm run build
+npm run build
-```
+```
-
+
-构建完成后，将 `dist` 目录部署到Web服务器即可。
+构建完成后，将 `dist` 目录部署到Web服务器即可。
-
+
-## 技术支持
+## 技术支持
-
+
-如有问题，请查看：
+如有问题，请查看：
-- README.md - 完整文档
+- README.md - 完整文档
-- public/models/README.md - 模型文件说明
+- public/models/README.md - 模型文件说明

README.md

@@ -0,0 +1,133 @@
+# 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
+```
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 开发运行
+
+```bash
+npm run serve
+```
+
+访问 http://localhost:8080
+
+## 生产构建
+
+```bash
+npm run build
+```
+
+## 使用说明
+
+### 1. 准备GLB模型文件
+
+将GLB模型文件放置在 `public/models/` 目录下，文件名需与 `data.json` 中的 `modelName` 字段对应。
+
+例如：`交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
+
+### 2. 配置模型数据
+
+编辑 `src/data/data.json`，添加或修改模型数据：
+
+```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

package.json

@@ -1,19 +1,19 @@
-{
+{
-  "name": "vue-model-review",
+  "name": "vue-model-review",
-  "version": "1.0.0",
+  "version": "1.0.0",
-  "description": "Vue2 3D Model Review Application",
+  "description": "Vue2 3D Model Review Application",
-  "scripts": {
+  "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "element-ui": "^2.15.13",
+    "element-ui": "^2.15.13",
-    "vue": "^2.6.14",
+    "three": "^0.184.0",
-    "vue-router": "^3.5.3",
+    "vue": "^2.6.14",
-    "three": "^0.124.0"
+    "vue-router": "^3.5.3"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14"
-  }
+  }
-}
+}

public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
+  <title>模型检测系统</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

public/models/README.md

@@ -0,0 +1,43 @@
+# 模型文件目录
+
+请将GLB格式的3D模型文件放置在此目录下。
+
+## 文件命名规则
+
+模型文件名必须与 `src/data/data.json` 中的 `modelName` 字段完全一致，并添加 `.glb` 扩展名。
+
+## 示例
+
+如果 data.json 中有以下数据：
+
+```json
+{
+  "modelName": "交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子"
+}
+```
+
+则对应的模型文件应命名为：
+```
+交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb
+```
+
+## 当前需要的模型文件
+
+根据 data.json 配置，需要以下模型文件：
+
+1. `交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
+2. `交流棒形悬式复合绝缘子，FXBW-10/70.glb`
+3. `10kV 三相隔离开关.glb`
+
+## 获取GLB模型
+
+- 可以使用Blender等3D建模软件导出GLB格式
+- 可以从3D模型库下载（如Sketchfab）
+- 可以使用在线转换工具将其他格式转换为GLB
+
+## 注意事项
+
+- 文件格式必须是 `.glb`（不是 `.gltf`）
+- 建议模型大小控制在10MB以内以保证加载速度
+- 模型应包含适当的材质和纹理
+- 建议模型中心点位于原点(0,0,0)

public/models/textureName.json

@@ -0,0 +1,57 @@
+{
+  "SK(螺纹)-电缆": "Sk(LuoWen)-DianLan",
+  "SK(螺纹)-螺栓": "Sk(LuoWen)-LuoShuan",
+  "SK(螺纹)-钢绞线": "Sk(LuoWen)-GangJiaoXian",
+  "SK(螺纹)-钢芯铝绞线": "Sk(LuoWen)-GangXinLvJiaoXian",
+  "SK(螺纹)-铝包钢芯铝绞线": "Sk(LuoWen)-LvBaoGangXinLvJiaoXian",
+  "SK-土质土": "Sk-TuZhiTu",
+  "SK-土质砂": "Sk-TuZhiSha",
+  "SK-土质草地": "Sk-TuZhiCaoDi",
+  "SK-塑料橙": "Sk-SuLiaoCheng",
+  "SK-塑料白": "Sk-SuLiaoBai",
+  "SK-塑料绿": "Sk-SuLiaoLv",
+  "SK-塑料蓝": "Sk-SuLiaoLan",
+  "SK-塑料黄": "Sk-SuLiaoHuang",
+  "SK-塑料黑": "Sk-SuLiaoHei",
+  "SK-橡胶橙": "Sk-XiangJiaoCheng",
+  "SK-橡胶灰": "Sk-XiangJiaoHui",
+  "SK-橡胶白": "Sk-XiangJiaoBai",
+  "SK-橡胶红": "Sk-XiangJiaoHong",
+  "SK-橡胶绿": "Sk-XiangJiaoLv",
+  "SK-橡胶蓝": "Sk-XiangJiaoLan",
+  "SK-橡胶黄": "Sk-XiangJiaoHuang",
+  "SK-橡胶黑": "Sk-XiangJiaoHei",
+  "SK-油漆白": "Sk-YouQiBai",
+  "SK-油漆红": "Sk-YouQiHong",
+  "SK-油漆绿": "Sk-YouQiLv",
+  "SK-油漆黄": "Sk-YouQiHuang",
+  "SK-油漆黑": "Sk-YouQiHei",
+  "SK-混凝土": "Sk-HunNingTu",
+  "SK-砌砖": "Sk-QiZhuan",
+  "SK-绝缘子棕": "Sk-JueYuanZiZong",
+  "SK-绝缘子白": "Sk-JueYuanZiBai",
+  "SK-绝缘子红": "Sk-JueYuanZiHong",
+  "SK-绝缘子银": "Sk-JueYuanZiYin",
+  "SK-道路-1.5LmPC-2改性乳化理清稀浆封层": "Sk-DaoLu-1.5lmpc-2GaiXingRuHuaLiQingXiJiangFengCeng",
+  "SK-道路-4%水泥稳定碎石": "Sk-DaoLu-4%ShuiNiWenDingSuiShi",
+  "SK-道路-5%水泥稳定碎石": "Sk-DaoLu-5%ShuiNiWenDingSuiShi",
+  "SK-道路-SMA-13沥青玛蹄脂碎石混合料": "Sk-DaoLu-sma-13LiQingMaTiZhiSuiShiHunHeLiao",
+  "SK-道路-中粒式沥青混凝土": "Sk-DaoLu-ZhongLiShiLiQingHunNingTu",
+  "SK-道路-人行道彩砖": "Sk-DaoLu-RenXingDaoCaiZhuan",
+  "SK-道路-水泥混凝土": "Sk-DaoLu-ShuiNiHunNingTu",
+  "SK-道路-水泥砂浆": "Sk-DaoLu-ShuiNiShaJiang",
+  "SK-道路-火烧板": "Sk-DaoLu-HuoShaoBan",
+  "SK-道路-粗粒式沥青混凝土": "Sk-DaoLu-CuLiShiLiQingHunNingTu",
+  "SK-道路-级配碎石": "Sk-DaoLu-JiPeiSuiShi",
+  "SK-道路-细粒式沥青混凝土": "Sk-DaoLu-XiLiShiLiQingHunNingTu",
+  "SK-道路-路缘石": "Sk-DaoLu-LuYuanShi",
+  "SK-金属灰白": "Sk-JinShuHuiBai",
+  "SK-金属绿": "Sk-JinShuLv",
+  "SK-金属蓝": "Sk-JinShuLan",
+  "SK-金属铜": "Sk-JinShuTong",
+  "SK-金属银": "Sk-JinShuYin",
+  "SK-金属黑": "Sk-JinShuHei",
+  "SK-防水-水泥砂浆 ": "Sk-FangShui-ShuiNiShaJiang ",
+  "SK-防火堵泥": "Sk-FangHuoDuNi",
+  "Thumbs.db": "Thumbs.db"
+}

src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+</style>