threejs中对fbx模型进行压缩并且代码解析加载

前言：fbx格式模型线上加载速度太慢了，老板让你优化加载速度！！！

1、首先使用blender将你的fbx格式的模型导出为gltf/glb格式的模型（或者使用npm下载fbx2gltf插件，将fbx转成glb也行，但是这样就比较麻烦了）

2、安装gltf-pipeline插件

npm install -g gltf-pipeline

3、安装完成之后,使用该插件进行模型压缩

打开命令行,cd或者powershell到.glb/gltf模型的文件夹下面,输入如下 命令进行压缩：

gltf-pipeline -i test8.glb -o testDraco.glb -d

其中:

test8.glb为初始模型的名称
testDraco.glb为结果模型名称

等待一段时间后，即可在该文件夹得到压缩后的模型。

4.THREEJS加载压缩好的glb格式的模型

我首先对我threejs版本进行了降级，降为了0.106.0

因为高版本的threejs，加载压缩过后的模型时会报错，decoder.GetAttributeDataArrayForAllPoints is not a function

将threejs版本降为0.106.0之后，又报了一个错：BufferGeometry 找不到

如下：

原因是低版本的threejs没有buffer，将报错的那一行删掉即可,然后关闭编辑器再重启即可解决。

除此之外，还有一个注意点，就是引入draco文件夹到项目目录下之后，要把draco_encode.js文件(该文件是压缩用的，我们用不到)删掉,否则引入之后终端会疯狂报错，如下：

以下是加载模型的代码：

    import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

    this.glbLoader = new GLTFLoader();
    this.dracoLoader = new DRACOLoader();
    DRACOLoader.setDecoderPath("../../../assets/libs/draco/");
    DRACOLoader.setDecoderConfig({ type: "js" }); //使用兼容性强的draco_decoder.js解码器
    this.glbLoader.setDRACOLoader(new DRACOLoader());

    let that = this;
    var loader = new FBXLoader();

    this.glbLoader.load("../../../assets/Models/modelDraco.glb", function (obj) {
      console.log('压缩过后的模型加载出来了', obj)
      var group = obj.scene.children[2]; //获得目标模型对象，具体要看你打印出来的3dObject在哪里      
      scene.add(group);
      group.scale.set(1, 1, 1);