在移动端进行三维装配体的拆分与移动操作一直是工业设计、产品展示和远程协作中的痛点。传统的桌面端CAD/CAM软件功能强大但受限于设备无法满足现场工程师、销售人员或客户随时随地查看和简单编辑模型的需求。本文将围绕“CAM进度”这一概念探讨如何实现手机端对装配体模型的轻量化交互包括拆分爆炸视图、移动零部件等核心功能并提供一套从模型处理到移动端集成的完整技术方案。1. 背景与核心概念1.1 什么是“CAM进度”在传统的计算机辅助制造CAM流程中“进度”通常指代一个零件从设计模型到生成可执行G代码的各个阶段。然而在更广泛的数字化协同语境下“CAM进度”可以引申为制造相关数据包括三维模型在协作链条中的流转与可视化状态。本文讨论的“在手机上进行装配体拆分与移动”正是“CAM进度”可视化与交互环节在移动终端的具体体现。它使得非设计岗位的人员如工艺工程师、生产主管、客户也能直观地理解产品结构并就特定部件进行沟通从而加速决策流程。1.2 移动端装配体交互的价值与挑战价值现场协同工程师在车间或客户现场可直接通过手机查看装配体进行拆解讲解标记问题。销售与展示销售人员向客户展示产品内部结构、工作原理提升体验。轻量化评审无需安装庞大的专业软件即可参与设计评审。培训与指导基于三维模型的拆装动画用于新员工培训或维修指导。挑战模型轻量化桌面端原始装配体文件如SolidWorks的.SLDASM、UG/NX的.prt体积庞大无法直接在手机端流畅加载和渲染。交互能力移动端触摸屏的操作逻辑如单指旋转、双指缩放、长按选择需要专门适配不同于鼠标键盘。格式兼容需要一种通用的、支持丰富语义信息如装配树、材质、动画的中间格式。性能优化在手机有限的GPU和内存资源下需保证复杂装配体的渲染帧率和操作响应速度。1.3 相关技术栈实现该功能通常涉及以下技术环节三维引擎用于在移动端渲染模型。常见的有Three.js(Web)、SceneKit(iOS)、ARKit(iOS)、ARCore(Android)、Unity3D、Unreal Engine或专业的CAD可视化库如HOOPS Communicator,Tech Soft 3D。模型转换工具将CAD原生格式转换为轻量化的Web友好格式如glTF、OBJ、STL。glTF因其高效的传输和渲染性能已成为事实上的Web3D标准。后端服务负责文件上传、格式转换、模型轻量化处理、用户权限管理等。前端框架构建移动端H5页面或原生App的UI界面。2. 环境准备与版本说明本文将以一个Web技术栈为例进行演示因为其跨平台特性最适合快速验证和部署。最终用户通过手机浏览器即可访问无需安装额外App。核心环境与工具操作系统Windows 10 / macOS / Linux (用于开发和服务端部署)Node.jsv16.0.0 及以上 (用于运行JavaScript服务和工具链)npmv8.0.0 及以上 或yarn三维显示库Three.js(r148 版本)模型加载与交互库Three.js官方扩展或社区库如用于加载glTF的GLTFLoader。模型转换工具Assimp(开源模型转换库) 或各CAD厂商的导出插件/API。本文示例使用一个假设的在线转换服务。开发工具任意代码编辑器如VSCode手机用于真机调试。项目结构预览mobile-assembly-viewer/ ├── public/ # 静态资源 │ ├── models/ # 存放转换后的glTF模型文件 │ │ ├── engine.gltf │ │ └── engine.bin # glTF的二进制数据文件 │ └── index.html # 主页面 ├── src/ # 源代码 │ ├── js/ │ │ ├── main.js # Three.js主场景逻辑 │ │ ├── controls.js # 移动端触摸控制器 │ │ └── assemblyManager.js # 装配体拆分与移动逻辑 │ └── css/ │ └── style.css # 样式文件 ├── package.json # 项目依赖 └── server.js # 简易开发服务器 (可选)3. 核心原理与技术拆解3.1 模型轻量化与格式转换原始CAD装配体包含精确的几何数据、复杂的特征历史、装配约束、材质和元数据。直接用于Web展示是低效的。转换流程导出中性格式从SolidWorks/UG等软件中将装配体另存为或导出为STEP、IGES或Parasolid格式。这些格式保留了装配结构和几何信息但去除了软件特定的特征树。转换为 glTF使用转换工具如Assimp命令行工具assimp export input.step output.gltf将中性格式转换为glTF。glTF支持场景图、网格、材质、动画非常适合WebGL渲染。优化 glTF使用工具如glTF-Pipeline或gltfpack对生成的glTF进行压缩、量化、网格简化以减小文件体积。# 示例使用 gltf-pipeline 进行Draco压缩 npx gltf-pipeline -i engine.gltf -o engine-draco.gltf -dDraco压缩可以显著减少模型文件大小但需要客户端支持Draco解码库。3.2 Three.js 场景管理与装配树映射在Three.js中一个装配体被加载为一个Group或Scene对象其子对象 (Object3D) 对应装配体中的各个零件或子装配体。关键步骤加载模型使用GLTFLoader加载glTF文件。遍历场景图递归遍历加载后的场景为每个网格对象 (Mesh) 添加自定义属性如partId,partName并建立与原始装配树节点的映射关系。创建UI装配树根据映射关系在网页侧边栏动态生成一个可交互的树形控件用于控制零件的可见性、高亮和选择。3.3 移动端触摸交互设计移动端的交互逻辑需要重新设计旋转单指在空白区域滑动控制模型绕其中心旋转。缩放双指捏合。平移双指在空白区域同向滑动。选择零件单指点击模型上的某个零件。这需要通过光线投射Raycasting来实现。移动/拆分零件长按选中零件后拖动手指零件将沿屏幕平面移动在三维空间中其移动轨迹需根据相机视角进行映射。拆分视图通常是通过为选中的零件施加一个平移动画使其从装配位置移动到特定位置。4. 完整实战案例构建手机端装配体查看器4.1 创建项目并初始化Three.js场景首先创建一个基本的HTML页面并引入Three.js库。我们使用ES模块方式并通过CDN引入。文件public/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno title手机端装配体查看器/title style body { margin: 0; overflow: hidden; font-family: sans-serif; } #canvas-container { width: 100vw; height: 100vh; } #ui { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 5px; max-width: 300px; max-height: 70vh; overflow-y: auto; } #assembly-tree { list-style: none; padding-left: 20px; } .part-item { padding: 5px; cursor: pointer; } .part-item:hover { background-color: #eee; } .selected { background-color: #a0d8ff; } /style /head body div idcanvas-container/div div idui h3装配体结构/h3 ul idassembly-tree/ul div idcontrols button idbtn-explode爆炸视图/button button idbtn-reset重置位置/button p选中零件: span idselected-part无/span/p /div /div !-- 引入Three.js及相关组件 -- script typeimportmap { imports: { three: https://unpkg.com/three0.148.0/build/three.module.js, GLTFLoader: https://unpkg.com/three0.148.0/examples/jsm/loaders/GLTFLoader.js, OrbitControls: https://unpkg.com/three0.148.0/examples/jsm/controls/OrbitControls.js } } /script script typemodule src./src/js/main.js/script /body /html4.2 编写Three.js主场景逻辑创建主JavaScript文件初始化场景、相机、渲染器、灯光并加载模型。文件src/js/main.jsimport * as THREE from three; import { GLTFLoader } from GLTFLoader; import { OrbitControls } from OrbitControls; // 全局变量 let scene, camera, renderer, controls; let model null; // 加载的模型根对象 let selectedObject null; // 当前选中的零件 const originalPositions new Map(); // 存储零件的原始位置用于重置 const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); // 初始化函数 function init() { // 1. 创建场景 scene new THREE.Scene(); scene.background new THREE.Color(0xf0f0f0); // 2. 创建相机 (透视相机适合3D查看) const aspect window.innerWidth / window.innerHeight; camera new THREE.PerspectiveCamera(45, aspect, 0.1, 1000); camera.position.set(10, 10, 10); camera.lookAt(0, 0, 0); // 3. 创建渲染器 const container document.getElementById(canvas-container); renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); // 4. 添加基础灯光 const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 15); scene.add(directionalLight); // 5. 添加轨道控制器 (用于桌面端调试移动端需自定义) controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 平滑阻尼效果 controls.dampingFactor 0.05; // 6. 加载模型 const loader new GLTFLoader(); loader.load( ./models/engine.gltf, // 你的glTF模型路径 function (gltf) { model gltf.scene; scene.add(model); // 遍历模型存储原始位置并建立零件列表 model.traverse((child) { if (child.isMesh) { child.userData.isPart true; // 标记为零件 child.userData.partName child.name || 未命名零件; originalPositions.set(child.uuid, child.position.clone()); // 存储原始位置 // 允许零件被点击选中 child.layers.enable(1); // 使用第1层进行选择 } }); // 将模型居中并调整相机 const box new THREE.Box3().setFromObject(model); const center box.getCenter(new THREE.Vector3()); const size box.getSize(new THREE.Vector3()); model.position.sub(center); // 将模型中心移到原点 camera.position.set(size.x * 2, size.y * 2, size.z * 2); controls.target.copy(center.sub(model.position)); // 更新控制器目标 controls.update(); // 更新UI装配树 updateAssemblyTree(model); console.log(模型加载成功:, model); }, undefined, function (error) { console.error(模型加载失败:, error); } ); // 7. 窗口大小变化响应 window.addEventListener(resize, onWindowResize); // 8. 点击事件监听 (用于选择零件) renderer.domElement.addEventListener(click, onCanvasClick, false); // 9. 为UI按钮绑定事件 document.getElementById(btn-explode).addEventListener(click, explodeView); document.getElementById(btn-reset).addEventListener(click, resetPositions); // 开始动画循环 animate(); } // 更新UI装配树 function updateAssemblyTree(rootObject) { const treeList document.getElementById(assembly-tree); treeList.innerHTML ; function createTreeItem(obj, parentLi) { if (obj.userData?.isPart) { const li document.createElement(li); li.className part-item; li.textContent obj.userData.partName; li.dataset.uuid obj.uuid; li.addEventListener(click, () selectPartFromUI(obj)); parentLi.appendChild(li); } // 递归处理子对象 obj.children.forEach(child createTreeItem(child, parentLi)); } const rootLi document.createElement(li); rootLi.textContent 装配体根节点; createTreeItem(rootObject, rootLi); treeList.appendChild(rootLi); } // 通过UI列表选择零件 function selectPartFromUI(obj) { if (selectedObject) { selectedObject.material.emissive.setHex(selectedObject.userData.originalEmissive); } selectedObject obj; // 高亮显示选中的零件 selectedObject.userData.originalEmissive selectedObject.material.emissive.getHex(); selectedObject.material.emissive.setHex(0x00ff00); // 绿色高亮 document.getElementById(selected-part).textContent selectedObject.userData.partName; // 更新UI列表选中状态 document.querySelectorAll(.part-item).forEach(item item.classList.remove(selected)); const uiItem document.querySelector(.part-item[data-uuid${obj.uuid}]); if (uiItem) uiItem.classList.add(selected); } // 点击画布选择零件 function onCanvasClick(event) { // 计算鼠标在归一化设备坐标中的位置 (-1 到 1) const rect renderer.domElement.getBoundingClientRect(); mouse.x ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y -((event.clientY - rect.top) / rect.height) * 2 1; // 更新射线投射器 raycaster.setFromCamera(mouse, camera); // 只检测标记为零件的网格 const meshes []; scene.traverse(obj { if (obj.userData?.isPart) meshes.push(obj); }); const intersects raycaster.intersectObjects(meshes, true); if (intersects.length 0) { const selectedMesh intersects[0].object; selectPartFromUI(selectedMesh); } else { // 点击空白处取消选择 if (selectedObject) { selectedObject.material.emissive.setHex(selectedObject.userData.originalEmissive); selectedObject null; document.getElementById(selected-part).textContent 无; document.querySelectorAll(.part-item).forEach(item item.classList.remove(selected)); } } } // 爆炸视图将所有零件沿其法线方向移动一定距离 function explodeView() { if (!model) return; const explodeDistance 2; // 爆炸距离 let index 0; model.traverse((child) { if (child.userData?.isPart) { // 简单示例沿世界坐标轴方向移动 const direction new THREE.Vector3( (index % 3) - 1, Math.floor(index / 3) % 3 - 1, Math.floor(index / 9) - 1 ).normalize(); child.position.add(direction.multiplyScalar(explodeDistance)); index; } }); } // 重置所有零件位置 function resetPositions() { if (!model) return; model.traverse((child) { if (child.userData?.isPart) { const originalPos originalPositions.get(child.uuid); if (originalPos) { child.position.copy(originalPos); } } }); } // 窗口大小变化响应函数 function onWindowResize() { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // 动画循环 function animate() { requestAnimationFrame(animate); controls.update(); // 更新控制器 renderer.render(scene, camera); } // 启动应用 init();4.3 实现移动端触摸控制替换OrbitControlsOrbitControls主要针对鼠标设计。我们需要一个简单的触摸控制器。文件src/js/touchControls.js(可选替换main.js中的OrbitControls引入和初始化)// 简易触摸控制器 class TouchControls { constructor(camera, domElement) { this.camera camera; this.domElement domElement; this.enabled true; // 状态变量 this.isRotating false; this.isPanning false; this.startX 0; this.startY 0; this.lastX 0; this.lastY 0; // 旋转敏感度 this.rotateSpeed 0.01; // 平移敏感度 this.panSpeed 0.02; this.bindEvents(); } bindEvents() { this.domElement.addEventListener(touchstart, this.onTouchStart.bind(this), false); this.domElement.addEventListener(touchmove, this.onTouchMove.bind(this), false); this.domElement.addEventListener(touchend, this.onTouchEnd.bind(this), false); } onTouchStart(event) { if (!this.enabled) return; event.preventDefault(); if (event.touches.length 1) { // 单指开始旋转 this.isRotating true; this.startX event.touches[0].clientX; this.startY event.touches[0].clientY; this.lastX this.startX; this.lastY this.startY; } else if (event.touches.length 2) { // 双指开始平移或缩放此处简化为平移 this.isPanning true; this.startX (event.touches[0].clientX event.touches[1].clientX) / 2; this.startY (event.touches[0].clientY event.touches[1].clientY) / 2; this.lastX this.startX; this.lastY this.startY; } } onTouchMove(event) { if (!this.enabled) return; event.preventDefault(); if (this.isRotating event.touches.length 1) { // 单指旋转 const touch event.touches[0]; const deltaX touch.clientX - this.lastX; const deltaY touch.clientY - this.lastY; // 绕世界坐标Y轴和X轴旋转相机 // 注意这里旋转的是相机绕目标点简化处理。更佳实践是旋转整个场景或模型。 const target new THREE.Vector3(0, 0, 0); // 假设目标点是原点 const deltaRotationX deltaX * this.rotateSpeed; const deltaRotationY deltaY * this.rotateSpeed; // 球坐标旋转逻辑简化版 const relativePos this.camera.position.clone().sub(target); const spherical new THREE.Spherical().setFromVector3(relativePos); spherical.theta - deltaRotationX; spherical.phi THREE.MathUtils.clamp(spherical.phi - deltaRotationY, 0.1, Math.PI - 0.1); this.camera.position.copy(target).add(new THREE.Vector3().setFromSpherical(spherical)); this.camera.lookAt(target); this.lastX touch.clientX; this.lastY touch.clientY; } else if (this.isPanning event.touches.length 2) { // 双指平移 const midX (event.touches[0].clientX event.touches[1].clientX) / 2; const midY (event.touches[0].clientY event.touches[1].clientY) / 2; const deltaX midX - this.lastX; const deltaY midY - this.lastY; // 计算相机右方向和上方向 const right new THREE.Vector3(); const up new THREE.Vector3(); this.camera.getWorldDirection(new THREE.Vector3()); // 前方向 this.camera.matrixWorld.extractBasis(right, up, new THREE.Vector3()); right.cross(up).normalize(); // 沿相机平面平移相机和目标点此处简化只平移相机 this.camera.position.add(right.multiplyScalar(-deltaX * this.panSpeed)); this.camera.position.add(up.multiplyScalar(deltaY * this.panSpeed)); this.lastX midX; this.lastY midY; } // 双指捏合缩放可以通过计算两指距离变化实现此处省略。 } onTouchEnd(event) { this.isRotating false; this.isPanning false; } update() { // 每帧更新可用于惯性滑动等此处为空 } } export { TouchControls };在main.js中将OrbitControls替换为TouchControls// import { OrbitControls } from OrbitControls; // 注释掉这行 import { TouchControls } from ./touchControls.js; // 新增 // ... 其他代码 ... // 替换 controls 初始化 // controls new OrbitControls(camera, renderer.domElement); controls new TouchControls(camera, renderer.domElement);4.4 运行与验证将转换好的engine.gltf和engine.bin文件放入public/models/目录。由于使用了ES模块和importmap需要一个本地服务器来运行避免CORS问题。可以使用Node.js的http-server或live-server。# 在项目根目录下 npm install -g live-server live-server public在电脑浏览器打开http://localhost:8080进行初步测试。使用手机和电脑在同一局域网下通过电脑的IP地址和端口访问如http://192.168.1.100:8080或在手机上直接打开。测试功能触摸旋转/平移、点击选择零件零件高亮、点击“爆炸视图”和“重置位置”按钮。5. 常见问题与排查思路问题现象可能原因解决思路模型无法加载控制台报404或跨域错误1. 模型文件路径错误。2. 本地文件访问受CORS限制。1. 检查loader.load中的URL路径确保相对于HTML文件位置正确。2.必须通过HTTP服务器如live-server运行项目而不是直接双击打开HTML文件。模型加载成功但显示全黑或位置不对1. 相机位置不合适。2. 灯光未正确设置。3. 模型尺寸过大或过小相机看不到。1. 调整camera.position或使用controls调整视角。2. 确保场景中添加了足够的环境光(AmbientLight)和方向光(DirectionalLight)。3. 在模型加载回调中计算模型的包围盒(Box3)并据此自动调整相机位置和目标点如示例代码所示。点击模型无法选中零件1. 射线投射(Raycaster)计算错误。2. 点击事件绑定到了错误的DOM元素。3. 模型网格未添加到检测数组。1. 检查mouse坐标计算是否正确确保从event.clientX/Y转换到了归一化设备坐标NDC。2. 确认addEventListener绑定的是渲染器的domElement。3. 确保raycaster.intersectObjects()传入的数组包含了所有需要被点击的网格对象。示例中我们遍历场景收集了所有userData.isPart为true的网格。触摸旋转/平移不跟手或方向错误1. 触摸事件逻辑有误。2. 坐标变换计算错误。3. 敏感度参数不合适。1. 仔细检查touchstart,touchmove,touchend事件处理逻辑区分单指和双指。2. 旋转计算建议使用球面坐标(Spherical)或四元数(Quaternion)确保绕世界坐标系或模型自身坐标系旋转符合直觉。3. 调整rotateSpeed和panSpeed参数。在低端手机上卡顿1. 模型面数太多。2. Three.js每帧渲染开销大。3. 动画循环未优化。1.模型轻量化是关键。在转换glTF阶段使用网格简化工具减少面数。2. 检查是否每帧都在执行耗时操作如复杂的遍历计算。3. 确保在animate函数中只进行必要的渲染和控制器更新。对于静态场景可以考虑只在控制器变化时渲染。爆炸视图效果不理想1. 爆炸方向算法过于简单。2. 零件间有重叠。1. 更高级的爆炸算法可以计算每个零件的包围盒中心然后从装配体中心沿径向爆炸或根据装配层级关系进行阶梯式爆炸。2. 可以引入碰撞检测或设置不同的爆炸距离系数。6. 最佳实践与工程建议6.1 模型处理流程标准化建立转换流水线使用脚本如Python pyassimp或工作流工具如Jenkins自动化CAD导出、格式转换、glTF优化步骤确保每次设计更新后移动端模型能自动同步。分级加载LOD对于极其复杂的装配体准备多个细节层次的模型。在移动端根据相机距离动态切换不同精度的模型以提升性能。纹理与材质优化将CAD中的物理材质转换为glTF支持的PBR材质并压缩纹理图片如转为.ktx2格式以减小下载体积和GPU内存占用。6.2 前端性能优化合并绘制调用如果多个零件使用相同材质可以考虑在转换阶段或运行时合并它们的几何体(BufferGeometry)以减少WebGL的绘制调用次数。使用InstancedMesh对于大量相同的标准件如螺丝、垫圈使用THREE.InstancedMesh进行实例化渲染可以极大提升渲染效率。实现视锥裁剪只渲染相机视野内的零件。Three.js本身会进行视锥裁剪但对于非常多的对象主动管理其可见性仍有好处。防抖与节流对窗口resize、频繁的UI更新等事件使用防抖或节流避免不必要的性能开销。6.3 交互体验提升手势反馈为旋转、平移等操作添加平滑的惯性动画使交互更自然。多选与框选支持通过拖拽框选多个零件或长按进入多选模式便于对一组零件进行操作。动画与状态保存零件的移动、爆炸过程应使用Tween动画而不是瞬间跳变。同时应能保存和恢复不同的视图状态如爆炸状态1、爆炸状态2、剖切视图。测量与标注高级功能可以包括测量距离、角度以及在模型上添加文字或箭头标注这些信息可以保存并与后端同步。6.4 后端与架构考虑生产环境微服务架构将文件上传、格式转换、模型存储、用户会话管理拆分为独立的微服务。权限与数据安全模型数据是企业的核心资产。必须实现严格的用户认证、授权和访问控制。对glTF等静态文件可通过生成临时签名URL进行访问。版本管理将模型文件与设计版本号关联确保移动端查看的永远是审批通过的版本。离线支持对于车间等网络不稳定环境可以考虑使用PWA技术或原生App实现模型和操作的本地缓存。6.5 测试与兼容性多平台测试在iOS Safari、Android Chrome、微信内置浏览器等主流移动端环境中进行充分测试。降级方案对于不支持WebGL或性能极差的旧设备应提供降级方案如显示模型的静态图片、简化线框模式或友好的错误提示。内存泄漏检查在Three.js开发中注意及时销毁不再使用的几何体、材质和纹理从场景中移除对象避免内存泄漏。可使用Chrome DevTools的Memory面板进行检测。通过以上方案我们构建了一个基础的、可在手机端进行装配体查看、选择和简单拆分的Web应用。这为将复杂的CAM数据进度可视化并融入移动协同流程提供了可行的技术路径。实际项目中可以根据具体需求在此基础之上集成更专业的CAD内核如通过WebAssembly以实现精确的几何操作或与PLM/ERP系统对接实现真正的“CAM进度”全流程移动化跟踪与交互。