当前位置： 首页 > news >正文

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

news 2025/5/2 10:05:37

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

项目概述

这是一个基于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渲染引擎。数据流向如下：

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

模块划分

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

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

项目结构

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

开发流程与工作方式

开发流程

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

工作方式

  • 使用Git进行版本控制
  • 采用组件化开发方式，每个功能模块独立开发
  • 使用Pinia进行状态管理，确保数据流的清晰性
  • 定期进行代码审查和重构，保持代码质量

参考资料

  • Three.js文档: https://threejs.org/docs/
  • Vue 3文档: https://v3.vuejs.org/
  • GLTF格式规范: https://github.com/KhronosGroup/glTF
  • Pinia状态管理: https://pinia.vuejs.org/
  • 《3D Game Engine Design》 - David H. Eberly
  • 《Learning Three.js》 - Jos Dirksen
http://www.xdnf.cn/news/249355.html

相关文章：

  • 2024年US SCI1区TOP：自适应变异麻雀搜索算法AMSSA+地铁隧道变形预测，深度解析+性能实测
  • 小刚说C语言刷题—1602总分和平均分
  • xml 和 yaml 的区别
  • 冒泡排序：从入门到入土（不是）的奇妙旅程
  • 文章记单词 | 第55篇（六级）
  • 字节跳动社招 BSP驱动工程师
  • 猫，为什么是猫？
  • JavaScript基础-比较运算符
  • 前端八股 5
  • 2025深圳杯、东三省数学建模B题数模AI全网专业性第一
  • 2025五一杯C题五一杯数学建模思路代码文章教学:社交媒体平台用户分析问题
  • 文章记单词 | 第53篇（六级）
  • windows中Python的pip工具换源的方法及其原理
  • HOOK上瘾思维模型——AI与思维模型【88】
  • HW1 code analysis (Machine Learning by Hung-yi Lee)
  • gephi绘图
  • 自动剪辑批量混剪视频过原创软件工具视频帧级处理技术实践批量截图解析
  • Python实例题：Python实现Python解释器
  • C++的基础知识（引用、类、封装、继承、多态、函数重载）
  • 驱动读写实验
  • GRPO：利用组内平均奖励来计算优势
  • 蓝桥杯Python案例
  • 计算机组成原理实验（5） 堆栈寄存器实验
  • 2025五一杯数学建模ABC题赛题已出
  • ctfshow web入门 web44
  • Python学习笔记（第一部分）
  • 基于深度学习的人脸属性识别算法研究
  • 随机森林实战：从原理到垃圾邮件分类
  • 超稳定性理论
  • 第十四章：生产之路：LLM 应用部署、运维与优化