做工业产品展示、Web 3D 在线预览或者数字孪生项目时客户甩过来一个 STEP 或 IGES 格式的 CAD 模型是再常见不过的事。而你手里的 Web 渲染链路往往只认 GLB——浏览器里直接丢 STEP 文件是打不开的。今天我直接从实操层面把 CAD 到 Web 这条转换链路完整拆一遍为什么必须转、用什么转、每个参数怎么设以及那些文档里不会写的坑。无论你在做在线选型、设备说明书还是产品展示页这套流程应该都能直接拿来用。这不是什么“一键转换”的魔术。CAD 模型转 GLB本质上是从精确几何变成离散三角网格里面涉及单位、坐标系、网格精度、材质、交互性能一串问题。但只要抓住一条主线——用 FreeCAD 把 STEP/IGES 网格化再用 Blender 整理导出 GLB最后在 Three.js 里验证——你就拥有了一条可以反复复用的流水线。1. 为什么“另存为GLB”行不通两类格式的本质差异1.1 STEP/IGES 的底层逻辑STEPISO 10303和 IGES 是工业界通用的中性 CAD 交换格式它们携带的是边界表示B-rep数据。模型的每个面都是数学曲面NURBS、平面、圆柱、圆锥等的精确描述边是这些曲面求交得到的连续曲线顶点是边的端点。举一个例子表示一个圆柱形轴径STEP 里存的不是一个一个三角片而是一个“圆柱面 两个圆边 两个顶点”的精确定义。理论上你可以从这份数据里恢复出无限精确的加工路径用于 CAM、CMM 都没问题。IGES 的历史比 STEP 更早偏重自由曲面造型很多老系统里还在用。但它的实体表达不像 STEP 那么严格容易出现碎面、缝隙、重叠面。如果客户两个格式都给了第一选择永远是 STEP。1.2 GLB 的底层逻辑GLB 是 glTF 2.0 的二进制封装格式。glTF 这个生态被称作“3D 格式里的 JPEG”天生就是为 Web 渲染管线准备的。它内部存的是三角网格一大堆顶点坐标、法线、UV、材质参数以及节点之间的层级关系。GPU 拿到它之后只需要做一件事——把三角形画到屏幕上它不关心什么是 NURBS也无所谓工程上的精确。注意GLB 不是“另一种 CAD 格式”。它不会保存螺纹线、装配约束、公差、PMI 标注这些制造信息。也就是说GLB 是表达层不是工程源数据。1.3 转换的本质从“精确描述”到“显示近似”所以转换本质上只有两件事第一把连续的曲面离散成三角网格第二把 CAD 的装配层级映射成 glTF 的场景图。前者的代价是“网格质量”——三角形越多越接近原始曲面但文件越大、加载越慢后者则引出了单位、坐标轴、组件命名、材质一系列适配问题。这套逻辑听起来简单实际操作中每一步都有无数坑等着你。我在后文会把这些参数挨个讲清楚。1.4 这套转换能力的典型应用场景先别急着动手想清楚为什么转。我见过太多团队为了一个模型能进网页折腾一两天最后才发现用错了方向。这套 STEP/IGES 转 GLB 的流程最常落在这些场景里产品在线的 3D 展示页选型、卖点演示、设备拆解说明书或维修手册、售前报价单上的数字孪生模型、远程协作评审甚至是 AR/VR 展示。核心诉求大多是“好看、能转、能交互”而不是“能加工”。只要目标明确后面所有精度和性能的取舍就有了依据。2. 转换工具怎么选三种路径的对比与推荐2.1 常见转换路径先看结论先给一张对照表免得大家一头扎进去折腾一晚上又回到原点路径上手难度保真度适用场景原版 CAD 软件直接导出 glTF/GLB最低高但支持有限用的是新版主流 CAD 且刚好支持FreeCAD 网格化 Blender 整理中等高最通用推荐大多数团队用在线格式转换站点最低不稳定保真不可控临时查看且仅限非敏感数据我的主力方案是第二行下面细说原因。2.2 为什么不建议直接“CAD另存为OBJ”再转有些老流程是 CAD → OBJ → GLB。OBJ 确实是个非常通用的中间格式但大部分 CAD 软件直接另存出来的 OBJ 网格质量很差三角面非常碎、法线方向混乱、单位经常是“1 单位 1 英寸”而且很多 CAD 导出 OBJ 时会把模型强行放进一个巨大的世界坐标系导致整体数值特别大进 Blender 后要么闪烁要么精度异常。我接过一次同事给的 OBJ打开后模型缩成一个小点找了半天才反应过来他在 SolidWorks 里导出的是英寸我按毫米处理了正好差了 25.4 倍。这种低级但折磨人的错误完全可以通过 FreeCAD 这种“正经的网格化环节”来避免。2.3 我推荐的开源组合FreeCAD Blender gltfpackFreeCAD 负责把 STEP/IGES 网格化并导出 OBJBlender 负责修单位、转坐标轴、赋材质、导出 GLBgltfpack 作为体积优化备选。这条链路全程免费可脚本化不依赖互联网更不会把你的客户数据传到别人的服务器上。FreeCAD 的内核是 Open CASCADEOCCT这本来就是工业界解析 STEP 的基准实现之一解析能力不比商业软件差多少。Blender 则是现在 glTF 生态支持最完善的 DCC 工具3.6 版本以后 glTF 导出面板的功能已经非常成熟连接点和 Draco 压缩都支持得很好。2.4 什么时候该用在线转换或商业服务如果只是临时看一眼模型用一个在线转换器是最快的但如果模型属于还没发布的产品或者涉及医疗、军工、汽车底盘这些敏感领域千万不要随便传到第三方在线工具上。数据泄露一次麻烦就不是省那一两小时能填上的。另外一些大厂提供云端转换 API比如 Autodesk 那套这类方案适合已经做成前后端工程、有自动化需求、愿意付费的团队。但要注意就算走了云端转换单位、坐标系、材质这些问题依然得自己处理并不是“上传 STEP下载 GLB完事”。3. 一步步把 STEP/IGES 转成能在网页上跑的 GLB3.1 从 CAD 导出 STEP / IGES 的正确姿势不要忽略这一步源文件质量直接决定转换质量和效率。导出时优先选择 STEP AP214Application Protocol 214它在 AP203 的基础上更完整地保留了颜色和装配信息。以 SolidWorks 为例保存类型选择“STEP AP214”即可NX 导出时选 STEP214Creo 里选 Step AP214。如果模型有多个零部件尽量把“装配体 → 零件 → 实体”的层级一起导出方便后期在 Blender 里做分组。IGES 虽然不是不能用但它更常用于曲面造型实体模型放进 IGES 后经常出现缝隙和碎面转出来的网格很容易莫名其妙破洞。能用 STEP 就用 STEP。3.2 FreeCAD 网格化让曲面变成三角形以 FreeCAD 0.21 版本为例整体流程是这样打开 FreeCADFile → Open选择 STEP 文件等待导入完成。模型树里通常会出现一个 Part 容器也可能有多个 Body。切换到 Mesh Workbench网格工作台。在模型树里选中所有需要转换的对象点击菜单 Mesh → Meshing...选择 Netgen 或 Gmsh 求解器。在弹出的参数面板里设置 Linear Deflection线性偏差和 Angular Deflection角度偏差。线性偏差默认 0.1mm角度偏差默认 10°。点击 OK模型树里会多出一个 Mesh 对象。如果网格太大调大线性偏差如果曲面不够圆滑减小角度偏差。右键 Mesh 对象 → Export Mesh → 选 OBJ 格式导出。为什么导出 OBJ 而不是 STL因为 OBJ 可以带颜色和 UV之后进 Blender 操作空间大。STL 只有纯几何颜色、法线全部丢失还得在 Blender 里重新画。补充一个经验FreeCAD 里 Netgen 有时候会对非常复杂的 STEP 报错比如“shape is null”。这时候切换到 Gmsh 试试或者把 STEP 拆成几个零件分别网格化。千万别死磕一个求解器。3.3 Blender 处理单位、坐标轴、材质一次搞定这一步是踩坑重灾区我拆成四小块来讲。第一步单位。Blender 默认 1 单位等于 1 米。如果 STEP 导出的 OBJ 原始单位是毫米导入 Blender 后模型会变成一千单位长——相当于一千米。解决办法很简单导入 OBJ 后全选按 S 0.001 回车缩放然后 CtrlA → Scale 应用缩放变换。请务必导入后立刻做等材质调完再想起缩放所有 UV 和顶点数据都已经不对了。第二步坐标轴。CAD 多数是 Z 轴向上Three.js 等 Web 渲染引擎约定 Y 轴向上。两者差一个 90 度表现就是模型在网页里“躺着”。选中模型按 R X -90 回车把模型绕 X 轴旋转 -90°再 CtrlA → Rotation 应用旋转。如果后面导出 glTF 时勾选了“Y Up”也可以不手动旋转但我的建议是手动转一次让模型本身就是正向的后续交互逻辑才不用到处补偿方向问题。第三步材质。从 CAD 导出到 OBJ 之后原来在 CAD 里的材质基本只剩一个颜色甚至什么都没有。在 Blender 里选中模型新建一个 Principled BSDF 材质把 Base Color 改成主色、Metallic 控制金属感、Roughness 控制粗糙度。比如机器外壳Metallic 0.8、Roughness 0.4 通常能快速出工业质感按键或密封胶条就降低金属度。别偷懒直接用一个默认材质那在网页上会灰得很廉价。第四步检查法线。网格化之后法线方向经常不一致表现是模型表面出现一片一片的黑斑。进入 Edit Mode全选Mesh → Normals → Recalculate Outside。如果还有个别面朝向不对手动选中翻转。这步做完模型的“壳”才是正确的。3.4 导出 GLB 并做体积压缩在 Blender 里 File → Export → glTF 2.0有几个设置值得注意Format 选 glTF Binary (.glb)单文件分发最方便。Include 建议选 Selected Objects避免把临时灯光、摄像机一起打包。勾上 Y Up因为我们手动旋转过坐标轴再勾上这个保险。如果场景里有贴图或动画保持默认映射。Compression 里可以勾 Draco Compression。Draco 压缩能显著减小模型体积代价是前端加载时需要用对应的 DRACOLoader 解析。如果导出的 GLB 还是太大可以用 gltfpack 命令行再优化一轮gltfpack -i model.glb -o model_web.glb -cc -tc-cc压缩顶点数据-tc压缩纹理。注意 gltfpack 的压缩用的是 meshoptimizerWeb 端需要额外加载 EXT_meshopt_compression 扩展Three.js 里对应的是 MeshoptDecoder。如果你不想引入额外依赖直接用 Blender 导出的 Draco 压缩就够了对大多数产品模型来说压缩比已经非常可观。3.5 在 Web 工程里加载 GLB最小验证页面不管你是用 Vue、React 还是原生 Three.js先跑一个最小示例来验证 GLB 文件没有大问题永远是最省时间的做法。把导出的 model.glb 放在某个目录下建一个 HTML 文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleGLB Viewer/title stylehtml, body { margin: 0; height: 100%; }/style /head body script typemodule import * as THREE from three; import { GLTFLoader } from https://unpkg.com/three0.160.0/examples/jsm/loaders/GLTFLoader.js; const scene new THREE.Scene(); scene.background new THREE.Color(0x222222); const camera new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 1000); camera.position.set(3, 2.5, 3); camera.lookAt(0, 0, 0); scene.add(new THREE.AmbientLight(0xffffff, 0.6)); const dir new THREE.DirectionalLight(0xffffff, 2.5); dir.position.set(3, 5, 4); scene.add(dir); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); const loader new GLTFLoader(); loader.load(model.glb, (gltf) { scene.add(gltf.scene); renderer.render(scene, camera); }, undefined, (err) { console.error(加载失败, err); }); /script /body /html如果 GLB 里用了 Draco 压缩给 loader 挂一个 DRACOLoaderconst dracoLoader new THREE.DRACOLoader(); dracoLoader.setDecoderPath(https://www.gstatic.com/draco/versioned/decoders/1.5.6/); loader.setDRACOLoader(dracoLoader);本地测试直接用 VS Code 的 Live Server 打开或者 nginx 托管都行。部署到 nginx 时注意检查服务器有没有正确识别 .glb 的 MIME 类型。nginx 默认对 .glb 可能返回 application/octet-stream多数时候不会致命但遇到严格跨域或缓存策略时会出问题建议加一句location ~* \.glb$ { add_header Content-Type model/gltf-binary; }3.6 用 model-viewer 快速预览适合不写代码的同事如果你的前端团队根本还没搭起来或者你只是想快速发给机械工程师确认效果可以用 Google 的 model-viewer Web Component。一段 HTML 就搞定script typemodule srchttps://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js/script model-viewer srcmodel.glb camera-controls auto-rotate/model-viewer它会自动处理旋转、缩放、环境光照效果比裸 Three.js 好看不少。这个组件尤其适合“转换完先给客户看一眼”的场景不需要写任何业务代码。4. 关键参数和原理一次讲透4.1 单位为什么转出来模型缩小了1000倍最常见的翻车现场GLB 加载出来后模型小得几乎看不见或者大到飞出屏幕。根因是 STEP 文件内部通常以毫米为单位而 glTF 的世界是米。FreeCAD 在网格化导出 OBJ 时不会帮你换算单位Blender 导入后 1 单位就是 1 米——你在 FreeCAD 里看到的一根 1000 毫米的轴到 Blender 里就变成 1000 米长。解法就是我之前说的导入 OBJ 后先 S 0.001 缩放再 CtrlA 应用。或者在图里导入面板里直接填 Scale 0.001。这个坑我自己踩过不止一次每次换工具链就忘一次所以现在只要见到“导入后模型不在视野里”这种现象第一反应就是查单位。4.2 坐标系从 Z-Up 翻转到 Y-UpCAD 里 Z 轴朝上是机械行业的习惯因为车床、铣床的加工坐标都以 Z 轴为主轴。Web 和游戏生态约定 Y 轴朝上因为相机和人眼观察的方向更接近地平面。坐标系不处理模型就会躺倒。不少人选择“把相机转一下”来糊弄但这属于饮鸩止渴模型本身坐标系不对之后做旋转交互、模型对齐、AR 叠加全都会算错。正确的做法只有一个在 Blender 的 Object Mode 下按 R X -90 旋转并应用变换。如果你的模型后续要绑定骨骼动画这一步必须在绑定之前做否则动画全乱。4.3 网格精度弦差和角度差怎么配合FreeCAD 网格化面板里的 Linear Deflection弦差和 Angular Deflection角度差是整个转换链路里最核心的两个参数。弦差指的是三角形边偏离原始曲面的最大距离单位是毫米。它控制的是“平面拟合”的精度弦差越小平面越贴原始面。角度差指的是相邻面法线之间的最大夹角单位是度。它控制的是“曲面圆滑”程度角度差越小曲面越接近光滑但三角形数量会指数级上涨。以我的经验不同用途有不同的组合用途线性偏差角度偏差网页展示、外观预览0.1 mm10°线上测量、细节检查0.02 mm5°低配设备、大场景0.3 mm15°千万别贪精度。一个大型装配体用 0.05mm 网格化可能跑半个小时都出不来导出的 GLB 动辄几百 MB。做展示模型要克制先定“这个模型是给人看的不是拿去测量的”。4.4 材质与法线别让模型“黑着脸”上网页法线方向混乱是网格化转换后最常见的“变丑”原因。表现是模型表面一片片黑或者某些面在光照下像被挖空了一样。在 Blender 里选 Edit Mode → Mesh → Normals → Recalculate Outside 基本能解决 90% 的问题。如果模型有内部结构或镂空注意别把内部面也翻转出来否则出现“外面看成里面”的怪现象。材质方面STEP 转 OBJ 基本只保留一个基础颜色甚至什么都没有。做产品展示的模型我强烈建议在 Blender 里重新认真指定 PBR 材质Base Color 给主色、Metallic 控制金属感、Roughness 控制粗糙度。如果是透明亚克力或玻璃还要加 Transmission 节点。这一步费的时间直接影响网页上最终呈现的可信度比任何代码优化都重要。4.5 交付物清单给前端工程师的东西不止一个GLB从一个机械工程师手里接过来的东西通常应该是这样一个压缩包GLB 文件、纹理贴图如果有、一份说明文件模型单位、坐标轴约定、版本日期、以及原始 STEP 文件的存档路径。前端工程师拿到 GLB 不能只往服务器一丢还要知道这个模型该用什么光照、能不能动、哪个是正面。我建议把说明写进 README哪怕只有三行“单位已从毫米换算为米坐标轴为 Y-Up模型已减面至 XXX 万三角形。”这能省下你和前端之间大量的沟通成本。5. 实际转换中踩过的坑常见问题与解决方案速查5.1 组件丢失或装配混乱组件丢失的第一元凶不是转换工具而是 CAD 端导出时的选择。很多 CAD 软件导出 STEP 时默认只导出“显示状态”的零件隐藏的装配件会被丢掉。还有“仅当前配置”这个选项装配体有多个配置时很容易导错。在 FreeCAD 中导入后先展开模型树数一数有没有和 CAD 原模型一致数量的 Body。不一致就回 CAD 端重新导别在 FreeCAD 里手动重组后者又慢又容易出错。5.2 面数爆炸浏览器直接卡死一台普通机床的 STEP用 0.05mm 线性偏差网格化动辄上千万个三角形浏览器根本扛不住。实测经验是网页展示的模型控制在 30 到 80 万三角形以内比较稳。如果超了优先在 Blender 里用 Decimate 修改器Collapse 模式Ratio 调到 0.2 到 0.5减面效果立竿见影。再不够就配合 LOD 策略近距离用高模远距离用低模切换阈值根据相机距离决定。还有一条路是回 CAD 端把螺纹孔、装饰倒角这些高频特征抑制掉对视觉影响不大面数却降得飞快。5.3 渲染黑面、花面、闪烁大部分原因是法线问题用 Recalculate Outside 解决。但有些黑斑是因为模型里有重复面两个面叠在一起GPU 会随机取舍表现就是远处正常、近处闪烁。处理办法Edit Mode 全选后 Mesh → Clean Up → Merge by Distance合并重叠顶点。如果模型是从 IGES 转过来的这类情况比 STEP 多得多建议优先用 STEP 源文件。5.4 尺寸不准和几何变形有次客户反馈网页里量的孔直径是 10.5mm而 CAD 里明明是 10mm。排查下来不是缩放问题而是网格化时圆孔被多边形化了半径 5mm 的圆用 0.1mm 弦差去逼近内切圆直径实际会略小于 10mm测量越精细越容易发现偏差。如果模型要做线上测量网格化精度至少要到 0.01mm 量级同时要做好性能兜底。另外一定要在交付说明里写清楚GLB 是视觉近似不是制造数据不能拿去做 CAM 或进 CMM。5.5 大批量转换的个人建议如果你有一两百个模型要转不要每次手动开 FreeCAD 点鼠标。可以写一个基于 FreeCAD Python API 的批处理脚本核心逻辑就是读取 STEP → 网格化 → 导出 OBJ然后调 Blender 命令行做单位换算和旋转。整个批处理可以放进 CI/CD每天凌晨自动跑。不过批处理最容易翻车的还是个别 STEP 文件有报错或坏面脚本里一定要对每个文件做异常捕获失败的任务单独输出日志别让一个坏文件干掉整个批次。我在实际项目里用这套流程做过上百个设备的网页展示模型最大的体会是转换链路本身不难难的是把“模型要用来做什么”想清楚。如果只是视觉展示网格精度不用追求极致如果要线上测量就要接受性能和网格化时间的代价如果要长期维护原始 STEP 永远是源文件GLB 只是表达层。最后分享一个小技巧每次转换完 GLB先在浏览器里拍一张截图发给机械工程师确认比转十遍再让客户去看高效得多。模型方向对不对、颜色正不正、比例顺不顺一张图全都说清楚了。