three使用gltf-pipeline壓縮 並 加載 gltf 文件。

three作為webgl的天花板總是會碰到各種各樣的問題，當使用gltf文件過大時，three加載速度會變慢，可以使用 gltf-pipeline 壓縮gltf 來提升加載速度

一，在three中加載 gltf 文件。

    1, 使用npm下載three 

 cnpm install three -s -d 

　2，引入three // 其他配置自行完善

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

　3，加載gltf 文件　

　　　　　var _this = this;

　　　 let loader = new GLTFLoader();
      loader.load(
        `/3dplane/Camera-Gltf/Camera.gltf`,
        function (gltf) {
          gltf.scene.position.set(0, 0, 0);
          gltf.scene.name = "CoperParentCamera";
          // gltf.scene.scale.set(10, 10, 10);
          // gltf.scene.visible = false;
          _this.scene.add(gltf.scene);
        }
      );

　　刷新頁面完成 gltf 加載

二，使用 gltf-pipeline 壓縮 加載 gltf 文件。

　　1， 使用 gltf-pipeline 壓縮 gltf 文件

　　　　① 安裝  gltf-pipeline

npm install -g gltf-pipeline

　　　  ②  在 gltf  文件夾下打開控制台  在控制台中壓縮文件

　　　　　1，使用gltf-pipeline將gltf轉為glb

gltf-pipeline -i xxxxx.gltf -b -d  

　　　　　2，應用Draco壓縮

 gltf-pipeline -i xxxx.gltf -o xxxDroc.gltf -d

 

 

 壓縮成功！

 

　　2，加載壓縮后的文件

　　　　下載draco文件   draco文件地址   放入public文件夾下

　　　　var loader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("/draco/"); // 存放draco文件的路徑
      dracoLoader.preload();
      loader.setDRACOLoader(dracoLoader);

　　　　配置好loader后和gltf文件加載方式一致，注意文件路徑即可！

！！！！！！！！！！！！！OK