glb/gltf文件打包的几种方法

glb/gltf文件打包的几种方法

在3d开发过程中,发现建模师给的文件越来越多，越来越大，下载的越来越慢，场景加载的时间越来越长，就想着要解决这个问题。

在偶然中发现glb/gltf文件也是可以压缩的，今天咱们就来看看压缩的两种方法。

一、gltfpack

 首先要说明的是我不推荐使用这个方式。

缺点：因为它对文件的压缩太多度了。保存了文件45%的还原度，压缩体积为最少60%。

优点：不需要引入Draco 模块，写法简单，解压速度快。

如何使用

1引入

npm install -g gltfpack

2使用

在使用的时候建议放到public文件里面，我用的vue3框架，要使用绝对路径，要不然有可能找不到文件。

gltfpack -i public/model/主电除尘.glb -o public/newModel/主电除尘.glb -cc

3打包后体积对比，如图，打包后减少了一半多的体积

4使用

在引入的时候和普通的glb文件一样，只需要引入setMeshoptDecoder这个函数的解压规则，使用即可。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'



const gltfLoader = new GLTFLoader();

gltfLoader.setMeshoptDecoder(MeshoptDecoder)

await gltfLoader.load("newModel/主电除尘.glb", (gltf) => {

 scene.add(gltf.scene);

})

注意：three.js版本要升级，大于r122(即0.122，我的是0.138.3)。

• gltf-pipeline

这个是我目前使用的，也推荐使用，丢失文件图层的概率为80%，大的文件可能会丢一点，但是打包后和gltfPack差别不是特别大。

该方法也叫draco.js算法压缩。用于压缩和解压3D网格和点云。

缺点：代码写的比较多，解码麻烦，速度较慢。

优点：加压包后还原度比较高。

如何使用

1引入

npm install -g gltf-pipeline

2使用

在使用的时候建议放到public文件里面，我用的vue3框架，要使用绝对路径，要不然有可能找不到文件。

gltf-pipeline -i public/model/主电除尘.glb -o public/newModel/主电除尘.glb -d

最后的 -d 是要解码的，如果不带-d打包，不需要解码，但是压缩效果不是特别好，只能达到80%的压缩体积，不是特别好。

3打包后体积对比，如图，打包后减少了1/3的体积

4使用

使用的时候要引入DRACOLoader 来解码，要注意的是setDecoderPath的地址https://www.gstatic.com/draco/v1/decoders/，不是从node modules里面来的，不能听某些文章从three里面导出来，也不能放到本地，要不然解压不会成功的。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";



const gltfLoader = new GLTFLoader();

const dracoLoader = new DRACOLoader();



  dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");

  dracoLoader.setDecoderConfig({ type: "js" });

  dracoLoader.preload();

  gltfLoader.setDRACOLoader(dracoLoader)



await gltfLoader.load("newModel/主电除尘.glb", (gltf) => {

 scene.add(gltf.scene);

})

总结

 当然再选择哪种方法的时候可以都试试，那种方法打包后更符合你的需求，你再做出自己的选择。