模型文件

.gitignore

@@ -1,17 +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
+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

ANNOTATION_GUIDE.md

@@ -1,263 +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` - 详情页面
+# 模型标注配置指南
+
+## 概述
+
+本指南说明如何将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` - 详情页面

QUICKSTART.md

@@ -1,79 +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 - 模型文件说明
+# 快速启动指南
+
+## 第一步：安装依赖
+
+```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 - 模型文件说明

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",
-  "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"
-  }
-}
+{
+  "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",
+    "three": "^0.184.0",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.3"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "^5.0.8",
+    "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>