三维装配可视化界面开发笔记

项目概述

这是一个基于Vue.js和Three.js的三维装配可视化系统，用于展示机械零部件的装配和拆解过程。系统支持模型加载、拆解/装配路径生成、动画展示和工艺流程图生成等功能。

技术栈

前端框架: Vue 3 (使用组合式API)
构建工具: Vite 6.3.4
3D引擎: Three.js r152
状态管理: Pinia 2.1.0
路由: Vue Router 4.2.0
模型加载: GLTFLoader, OBJLoader
控制器: OrbitControls

开发日志

2025-04-30

初始化项目，使用npm create vite@latest创建Vue3项目
安装Three.js及相关依赖：npm install three @types/three
实现了基本的Three.js场景初始化，包括场景、相机、渲染器和控制器
添加了模型加载功能，支持GLTF和OBJ格式
遇到问题：模型加载后显示太小，调整了相机距离参数（从默认的5改为根据模型大小动态计算）
踩坑：Three.js的OrbitControls需要从examples中导入，不是核心包的一部分

2025-05-01

实现了部件选择和拖动功能，使用Raycaster进行射线检测
添加了拆解步骤记录功能，记录部件ID、动作类型和移动路径
实现了视图切换功能（正视图、俯视图、侧视图）
遇到问题：视图切换后模型显示不正确，调整了相机参数和上方向设置
踩坑：Three.js中相机的up向量设置对视图方向有重要影响，特别是在俯视图中需要设置为(0,0,-1)

2023-05-01

修复了模型加载问题，现在可以正确加载zhuangpeitu_asm模型
优化了相机控制，使模型显示更加合理（调整了fitCameraToObject函数中的边距系数）
添加了模型加载失败时的备用方案（loadFallbackModel函数）
遇到问题：某些复杂模型的部件层次结构难以正确解析
踩坑：GLTF模型中的bin文件路径问题，需要确保bin文件和gltf文件在同一目录下

系统架构

整体架构

系统采用前端单页应用架构，使用Vue3作为框架，Three.js作为3D渲染引擎。数据流向如下：

用户交互 -> Vue组件 -> Pinia Store -> Three.js场景更新
模型加载 -> 部件提取 -> 存储到Store -> 渲染到场景
部件操作 -> 记录步骤 -> 生成工艺流程

模块划分

系统分为以下几个主要模块：

模型查看器模块：负责3D场景渲染、模型加载和交互
工艺步骤模块：记录和展示装配/拆解步骤
工艺流程图模块：可视化展示装配流程
工具栏模块：提供视图切换、模型加载等功能

项目结构

src/
├── assets/          # 静态资源
├── components/      # 组件
│   ├── ModelViewer/ # 3D模型查看器
│   │   └── ModelViewer.vue  # 核心3D渲染组件
│   ├── ProcessChart/# 工艺流程图
│   │   └── ProcessChart.vue # 流程图组件
│   ├── StepList/    # 工艺步骤列表
│   │   └── StepList.vue     # 步骤列表组件
│   └── ToolBar/     # 工具栏
│       └── ToolBar.vue      # 工具栏组件
├── router/          # 路由配置
│   └── index.js     # 路由定义
├── services/        # 服务
│   └── assemblyService.js # 装配相关服务，包含路径计算等
├── stores/          # 状态管理
│   ├── modelStore.js    # 模型状态，存储模型和部件信息
│   └── assemblyStore.js # 装配状态，存储装配步骤和播放状态
└── views/           # 页面视图├── AssemblyDesignView.vue # 装配设计页面├── ProcessDesignView.vue  # 工艺设计页面└── StepDesignView.vue     # 工步设计页面

核心文件说明

ModelViewer.vue: 系统核心组件，包含Three.js场景初始化、模型加载、部件交互等功能
assemblyStore.js: 存储装配步骤、播放状态等信息，提供步骤添加、播放控制等方法
modelStore.js: 存储模型信息、部件列表等，提供部件选择、信息更新等方法
assemblyService.js: 提供路径计算、碰撞检测等服务

关键功能实现与数据结构

模型加载

模型加载使用Three.js的GLTFLoader和OBJLoader实现。加载后会提取模型的部件信息，并存储在modelStore中。

// 加载GLTF模型
const loadGLTF = (url) => {const loader = new GLTFLoader()loader.load(url,(gltf) => {// 清除现有模型clearScene()// 添加新模型到场景scene.add(gltf.scene)// 调整相机位置以适应模型fitCameraToObject(gltf.scene)// 提取部件信息const parts = extractParts(gltf.scene)modelStore.setParts(parts)// 设置动画混合器if (gltf.animations && gltf.animations.length > 0) {animationMixer = new THREE.AnimationMixer(gltf.scene)gltf.animations.forEach((clip) => {animationMixer.clipAction(clip).play()})}},// ...错误处理)
}

模型加载中遇到的主要问题是bin文件路径问题。GLTF文件通常引用外部的bin文件，需要确保这些文件在正确的相对路径上。我们通过将所有模型文件放在public目录下解决了这个问题。

部件提取与数据结构

部件提取是从加载的3D模型中识别和分离各个组件的过程。我们使用以下数据结构来表示部件：

// 部件数据结构
{id: String,         // 部件唯一标识符name: String,       // 部件名称mesh: THREE.Mesh,   // 部件的3D网格对象parentId: String    // 父部件ID，用于构建层次结构
}

提取过程中，遍历模型的所有网格对象，为每个网格创建一个部件对象：

// 从模型中提取部件信息
const extractParts = (object) => {const parts = []object.traverse((child) => {if (child.isMesh) {// 为每个网格创建一个唯一IDconst id = `part_${parts.length}`// 获取部件名称const name = child.name || `部件 ${parts.length + 1}`// 确定父部件IDlet parentId = nullif (child.parent && child.parent !== object) {parentId = child.parent.uuid}// 添加到部件列表parts.push({id,name,mesh: child,parentId})// 存储原始位置child.userData.originalPosition = child.position.clone()child.userData.originalRotation = child.rotation.clone()// 添加点击事件child.userData.partId = id}})return parts
}

部件拖拽与交互

实现了基于射线检测的部件选择和拖拽功能。当用户拖动部件时，会记录拆解步骤。

// 鼠标按下事件处理
const onMouseDown = (event) => {// 计算鼠标位置const rect = renderer.domElement.getBoundingClientRect()mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1// 设置射线raycaster.setFromCamera(mouse, camera)// 获取与射线相交的对象const intersects = raycaster.intersectObjects(scene.children, true)if (intersects.length > 0) {// 找到第一个有partId的对象const intersectedObject = intersects.find(intersect =>intersect.object.userData && intersect.object.userData.partId)if (intersectedObject) {// 禁用轨道控制器controls.enabled = false// 设置拖拽状态isDragging = true// 获取选中的部件const partId = intersectedObject.object.userData.partIdselectedPart = modelStore.parts.find(part => part.id === partId)// 记录起始位置dragStartPosition.copy(selectedPart.mesh.position)// 设置拖拽平面planeNormal.copy(camera.position).sub(controls.target).normalize()planePoint.copy(selectedPart.mesh.position)plane.setFromNormalAndCoplanarPoint(planeNormal, planePoint)}}
}

拖拽过程中，使用射线与平面的交点来确定部件的新位置：

// 鼠标移动事件处理
const onMouseMove = (event) => {if (!isDragging || !selectedPart) return// 计算鼠标位置const rect = renderer.domElement.getBoundingClientRect()mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1// 设置射线raycaster.setFromCamera(mouse, camera)// 计算射线与平面的交点const ray = raycaster.rayif (ray.intersectPlane(plane, intersectionPoint)) {// 移动部件selectedPart.mesh.position.copy(intersectionPoint)// 更新当前位置dragCurrentPosition.copy(intersectionPoint)}
}

工艺步骤记录

当用户拖动部件完成拆解操作时，系统会记录这个步骤。步骤数据结构如下：

// 步骤数据结构
{partId: String,     // 部件IDaction: String,     // 动作类型（拆解/装配）path: Array         // 移动路径，包含一系列位置点
}

步骤记录过程：

// 鼠标释放事件处理
const onMouseUp = () => {if (!isDragging || !selectedPart) return// 启用轨道控制器controls.enabled = true// 计算移动距离const distance = dragStartPosition.distanceTo(dragCurrentPosition)// 如果移动距离足够大，则记录拆解步骤if (distance > 0.5) {// 计算移动路径const path = calculateLinearPath(dragStartPosition, dragCurrentPosition, 20)// 记录拆解步骤assemblyStore.addStep({partId: selectedPart.id,action: '拆解',path: path})} else {// 如果移动距离不够，则恢复原位selectedPart.mesh.position.copy(dragStartPosition)}// 重置拖拽状态isDragging = falseselectedPart = null
}

视图切换

实现了正视图、俯视图和侧视图的切换功能。关键是设置相机位置和上方向向量：

// 改变视角
const changeView = (viewType) => {// 获取模型的边界框const box = new THREE.Box3().setFromObject(scene)const size = box.getSize(new THREE.Vector3())const center = box.getCenter(new THREE.Vector3())// 计算合适的距离const maxDim = Math.max(size.x, size.y, size.z)const distance = maxDim * 1.2// 根据视角类型设置相机位置switch (viewType) {case 'front':camera.position.set(center.x, center.y, center.z + distance)camera.up.set(0, 1, 0) // Y轴向上breakcase 'top':camera.position.set(center.x, center.y + distance, center.z)camera.up.set(0, 0, -1) // Z轴向下breakcase 'side':camera.position.set(center.x + distance, center.y, center.z)camera.up.set(0, 1, 0) // Y轴向上break}// 更新相机camera.lookAt(center)camera.updateProjectionMatrix()// 更新控制器controls.update()
}

工艺流程图生成

工艺流程图基于记录的拆解步骤生成，使用简单的节点和连线表示装配关系：

// 生成工艺流程图
const generateProcessChart = () => {const steps = assemblyStore.stepsif (steps.length === 0) return// 清除现有图表chartContainer.innerHTML = ''// 创建SVG元素const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')svg.setAttribute('width', '100%')svg.setAttribute('height', '100%')// 为每个步骤创建节点steps.forEach((step, index) => {const part = modelStore.parts.find(p => p.id === step.partId)if (!part) return// 创建节点const node = document.createElementNS('http://www.w3.org/2000/svg', 'circle')node.setAttribute('cx', 50 + index * 100)node.setAttribute('cy', 50)node.setAttribute('r', 20)node.setAttribute('fill', '#42b883')// 创建标签const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')text.setAttribute('x', 50 + index * 100)text.setAttribute('y', 90)text.setAttribute('text-anchor', 'middle')text.textContent = part.name// 添加到SVGsvg.appendChild(node)svg.appendChild(text)// 添加连线if (index > 0) {const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')line.setAttribute('x1', 50 + (index - 1) * 100)line.setAttribute('y1', 50)line.setAttribute('x2', 50 + index * 100)line.setAttribute('y2', 50)line.setAttribute('stroke', '#666')line.setAttribute('stroke-width', 2)svg.appendChild(line)}})// 添加到容器chartContainer.appendChild(svg)
}

开发流程与工作方式

开发流程

需求分析：确定系统功能和用户交互方式
技术选型：选择Vue3和Three.js作为主要技术栈
架构设计：设计系统模块和数据流
组件开发：
- 先开发核心的ModelViewer组件
- 实现基本的模型加载和显示
- 添加部件选择和拖动功能
- 实现工艺步骤记录
- 开发工艺流程图生成功能
集成测试：测试各模块之间的交互
优化改进：根据测试结果进行优化