gltf-pipeline压缩gltf与加载教程

gltf-pipeline的git地址:https://gitcode.net/mirrors/analyticalgraphicsinc/gltf-pipeline

1.全局安装：

npm install -g gltf-pipeline

2.打开cmd，路径切换到需要压缩的gltf文件所在的目录，例如有一文件model.gltf需要压缩：

执行：

gltf-pipeline -i model.gltf -j -d

即可输出压缩后的文件model-processed.gltf.

3.若想查看gltf文件中的贴图和网格信息，可执行：

gltf-pipeline -i model.gltf -o test.gltf -t

注意：gltf中的贴图文件是不能被压缩的，若文件中的纹理贴图占的比重很大，则使用此插件进行压缩效果也不是太理想。最好去压缩图片来解决文件大的问题。

 以上参考文章：链接https://blog.csdn.net/qq_38323658/article/details/118016680?ops_request_misc=&request_id=&biz_id=102&utm_term=gltf%E6%A8%A1%E5%9E%8B%E5%8E%8B%E7%BC%A9&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-9-118016680.pc_search_result_hbase_insert&spm=1018.2226.3001.4187

4.加载被gltf-pipeline压缩过的gltf文件：

下载draco文件draco文件地址 https://download.csdn.net/download/qq_15023917/85024262 放入public文件夹下

引入DRACOLoader，其实加载压缩过的gltf文件所需的代码只比之前加载普通的gltf文件多了三行代码，详细代码如下：

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

   //加载gltf文件
   var loader = new GLTFLoader();
   let dracoLoader = new DRACOLoader();
   dracoLoader.setDecoderPath("draco/");
   loader.setDRACOLoader(dracoLoader);
   loader.load(
          "model-process.gltf",
          function(gltf) {
            var model = gltf.scene;
            scene.add(model);
          },
          function(xhr) {
            var percentage = Number(((xhr.loaded / xhr.total) * 100).toFixed(0));
          },
          function(error) {
            console.log("load error!" + error.getWebGLErrorMessage());
          }
    );