shanke/vue-model-review

Fork 0

Files

cao_yi_min 266e15c861 文件上传

2026-04-27 01:44:55 +00:00

6.5 KiB

Raw Blame History

模型标注配置指南

概述

本指南说明如何将3D模型的部件与检查项目（annotations）精确匹配，实现准确的标注定位。

方法一：使用调试组件查看模型结构

1. 启用调试模式

在 ModelDetail.vue 中使用 ThreeViewerDebug 组件并启用调试模式：

<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. 记录部件信息

打开浏览器控制台（F12）
查看控制台输出的"模型部件列表"和"部件映射表"
点击模型上的部件，查看其名称和坐标
点击"复制坐标"按钮，将坐标复制到剪贴板

方法二：通过命名匹配（推荐）

自动匹配规则

组件会自动尝试匹配 componentCheck 中的 name 与模型mesh的名称：

精确匹配：mesh名称完全等于annotation名称
包含匹配：mesh名称包含annotation名称，或反之
关键词匹配：拆分annotation名称，匹配关键词

示例

如果模型中有以下mesh名称：

- 引线_001
- 避雷器本体
- 铭牌标识
- 螺栓组件
- 线夹装置
- 绝缘罩_上
- 绝缘罩_下

data.json中的配置：

{
  "componentCheck": [
    { "name": "引线", "content": [...] },           // 匹配 "引线_001"
    { "name": "避雷器与支撑件结构", "content": [...] }, // 匹配 "避雷器本体"
    { "name": "铭牌", "content": [...] },           // 匹配 "铭牌标识"
    { "name": "螺栓螺母", "content": [...] },       // 匹配 "螺栓组件"
    { "name": "线夹", "content": [...] },           // 匹配 "线夹装置"
    { "name": "绝缘罩", "content": [...] }          // 匹配 "绝缘罩_上" 或 "绝缘罩_下"
  ]
}

方法三：手动配置坐标

如果模型没有命名或命名不规范，可以手动配置坐标。

1. 在data.json中添加position字段

{
  "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() 方法中添加：

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);
        // ...
      }
    }
    // ...
  });
}

获取坐标的步骤

使用调试模式

启用 debugMode="true"
运行项目，打开模型详情页
点击模型上的部件
查看右侧调试面板显示的坐标
点击"复制坐标"按钮
将坐标粘贴到data.json的对应位置

使用控制台

打开浏览器控制台（F12）
点击模型部件

查看控制台输出：

点击的部件: {
  name: "引线_001",
  position: { x: 0.523, y: 2.145, z: 0.312 }
}

复制坐标到data.json

完整示例

data.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使用

<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>

注意事项

坐标系统：Three.js使用右手坐标系，Y轴向上
模型居中：组件会自动将模型居中，坐标相对于模型中心
标注高度：标注会自动放置在部件上方约0.3单位处
命名规范：建议在建模时为重要部件命名，便于自动匹配
性能考虑：过多的标注可能影响性能，建议控制在10个以内

故障排查

标注不显示

检查 labelRenderer.render() 是否在动画循环中调用
检查标注位置是否在相机视野内
检查CSS样式是否正确

无法匹配部件

使用调试模式查看模型部件列表
检查mesh是否有命名
考虑使用手动配置坐标

高亮不生效

检查是否正确传递mesh对象
确认OutlinePass已正确初始化
查看控制台是否有错误信息

6.5 KiB Raw Blame History Unescape Escape