Draco

3D模型壓縮及放置

1.安裝NodeJS

2.檢查是否有npm

3.安裝 gltf-pipeline

4.壓縮模型檔案

5.檢查壓縮過的模型

6.Three.js讀取壓縮過的模型

//加載GLTF 模型需要的js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//加載解碼需要的js
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
//建立解碼加載器
let dacLoader = new DRACOLoader();
/*
* https://www.gstatic.com/draco/v1/decoders/
* 為解碼器源碼目錄,
* 如果有下載就可以使用第二種自己指定路徑主要是這三隻需要存在
* draco_decoder.js— Emscripten 編譯的解碼器，兼容任何現代瀏覽器。
* draco_decoder.wasm— WebAssembly 解碼器，兼容較新的瀏覽器和設備。
* draco_wasm_wrapper.js— WASM 解碼器的 JavaScript 包裝器。
*/
dacLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
//dacLoader.setDecoderPath('/draco/');
//建立模型加載器
const loader = new GLTFLoader(); 
loader.setDRACOLoader(dacLoader);
loader.load('/model/A-1_drc.gltf',
            (gltf) => {
             this.scene.add(gltf.scene);
            });

優缺點

• 很明白的檔案大小差異非常大
• 壓縮過的檔案增加了解碼時間，如果你本身檔案很小就沒必要用此方式
• 跟壓縮圖片一樣，模型有機會有失真問題
• 實測專案本頁讀取速度在本機直接剩下10-20秒，客戶端server約1分鐘內，比原本少了5倍時間