STEP和IGES模型转换为适用Web的glb格式

前言

博主最近一直在调研web3d格式转换和优化相关的东西，国内资料比较少，很多信息甚至只能从 GitHub 的 issue 里边才能窥知一二，特写下此篇博客，希望能让有此需求的伙伴们少走一些弯路。

排版看起来可能舒服一点的博客永久地址：step和iges模型转换为适用web的glb格式/

正文

基于本文做的开源项目

可以通过一个简单的入口脚本配合docker，完成对多种类型3d模型的转换，支持 glb(binary) 和 gltf，并自动压缩
项目地址：https://github.com/wangerzi/3d-model-convert-to-gltf

去项目中下载 convert.sh 后，准备好docker环境（镜像有点大 1G+，请配合国内镜像源下载），执行如下格式的脚本即可一键转换

convert.sh [stl|step|iges|obj|fbx] inputpath.stl outputpath.glb # convert to gltf bin file
convert.sh [stl|step|iges|obj|fbx] inputpath.stl outputpath.gltf # not only bin file

了解STEP和IGES格式

首先，需要大概了解下 STEP 格式和 IGES 格式到底是什么，哪些领域正在使用
英文基础比较不错的童鞋，可以参考下如下外文资料
STEP文件：
https://fileinfo.com/extension/step
IGES文件：
https://fileinfo.com/extension/iges

简单来说，这俩都是CAD的一种文件标准，STEP比IGES出现得更晚一些，由于IGES格式的最新版本是96年发布的，现在多由更高效的STEP等新格式替代，不支持材质

IGES 可以安装 iges viewer 这一免费工具在电脑上查看
下载链接在此：https://igsviewer.com/download.aspx

比如网上随便下载的一个 IGS 文件，打开后展示效果如下

但是，现行主流的web3d库，比如 three.js、Babylon 均不支持 STEP 和 IGES 模型，需要解决这个问题有两个思路

• 深入了解格式含义，编写代码给对应库提交对应的解析方案（想法很好，但是实践不易）
• 将格式转换为适合web展示的格式，比如称为3d界JPG的 GLTF 格式（本文就是讲这个的）

three.js 社区中有关于 STEPLoader 的讨论，链接如下：https://github.com/mrdoob/three.js/issues/7125

了解STL格式

STL格式更多出现在3D打印中，只能用来表示封闭的体或者面，且文件内部都用三角形表示，所以转换精度比较粗的话，看起来效果比较诡异，包括 Ascii 编码和二进制两种编码模式，一般采用二进制，因为体积相对较小，并且与STEP和IGES一样不支持材质
比如同一个模型（STEP大小：4.81M），转换精度不同可能就是如下两种效果
粗精度（Ascii编码：3.7M）：

细精度（Ascii编码：63.3M，二进制编码：12.1M）：

但是模型大小也会很有区别，甚至同一个图，精度调整很细的话，能达到一百多兆 模型的加载和解析都非常慢，精度调整粗一点，几兆就搞定了，但是页面展示的效果根本不能看

为何不统一转换为stl格式？

看到这里，大家应该知道了，STL非常不适合web的模型展示，精度稍高体积就十分庞大这一点直接 PASS

CTM格式

这里简单提一下 CTM 格式，这是一个压缩能力很强的格式，就上面截图的小杯子，精度稍高的 STL 得有 60M 左右，但是CTM得到更好的效果，