开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
用three.js做车间可视化项目时，其中一个关键难点在于模型压缩处理，对于模型压缩处理，总结了如下一系列方法步骤。
处理流程
Obj+mtl（不含动画）
- 用MVC软件将SolidWorks模型进行压缩处理，导出obj格式
- 给模型添加材质，导出模型需勾选三角网面
- 用obj2gltf将obj格式转换为gltf，用gltf-pipeline进行draco压缩，导入页面
fbx（含动画）
- 给模型添加材质，导出模型需勾选三角网面
- 用fbx2gltf将fbx格式转换为gltf，用gltf-pipeline进行draco压缩，导入页面
obj格式转gltf格式
安装obj2gltf
前提条件：node.js
- 安装obj2gltf，以管理员身份运行cmd，并将其路径切换到nodejs安装路径下nodejs\node_modules\npm，npm文件夹，在后边运行程序npm install --save obj2gltf。在路径nodejs\node_modules\npm\node_modules下就会增加obj2gltf文件夹
- 在Github上下载obj2gltf，github.com/AnalyticalG…
- 将第1步生成的nodejs生成的npm下的node_modules文件夹拷贝至解压的文件夹内。
fbx格式转gltf格式
安装并使用fbx2gltf
- 安装node.js
- 使用npm安装fbx2gltf.js插件,打开命令行界面，进入node.js安装目录，执行如下命令：
- 使用fbx2gltf转换fbx文件为gltf文件
命令行界面进入fbx2gltf文件下的bin文件，然后根据平台选择进入相应目录，示例是window系统选择Windows_NT目录，同时把要转换的fbx文件放在该目录下；
在命令行执行如下命令，进行格式转换（-i表示输入、-o 表示输出可省略）：
gltf格式压缩
安装gltf-pipeline
npm install -g gltf-pipeline
通过命令行使用 gltf-pipeline
glTF转化为 glb
gltf-pipeline -i model.gltf -o model.glb
gltf-pipeline -i model.gltf -b
glb转化为glTF
gltf-pipeline -i model.glb -o model.gltf
gltf-pipeline -i model.glb -j
glTF转化为Draco glTF
draco-gltf文件导入页面
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";//引入gltf加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";//引入draco加载器
let that = this;
this.gltfLoader = new GLTFLoader();
// 这个是Threejs解析draco压缩之后的解析器
// 它从这里读取解析器JS
this.dracoLoader = new DRACOLoader();
this.dracoLoader.setDecoderPath("../static/draco/gltf/");//draco路径需为静态路径
this.dracoLoader.setDecoderConfig({type: 'js'});
// 将Draco解析器和GltfLoader绑定在一起
this.gltfLoader.setDRACOLoader(this.dracoLoader);
//加载gltf
this.gltfLoader.load(path1 + ".gltf", function (object) {
that.workshop = object.scene; //存储到全局变量中
})
