系列文章目錄

Three.js 快速入門教程【一】開啟你的 3D Web 開發之旅
Three.js 快速入門教程【二】透視投影相機
Three.js 快速入門教程【三】渲染器
Three.js 快速入門教程【四】三維坐標系
Three.js 快速入門教程【五】動畫渲染循環
Three.js 快速入門教程【六】相機控件 OrbitControls
Three.js 快速入門教程【七】常見幾何體類型
Three.js 快速入門教程【八】常見材質類型
Three.js 快速入門教程【九】光源類型
Three.js 快速入門教程【十】常見的紋理類型
Three.js 快速入門教程【十一】天空盒的多種實現方式
Three.js 快速入門教程【十二】外部模型加載
Three.js 快速入門教程【十三】外部模型加載后常見的處理操作
Three.js 快速入門教程【十四】使用Stats.js監控渲染幀率和性能優化
Three.js 快速入門教程【十五】交互神器DragControls使用詳解，實現對物體或模型拖拽
Three.js 快速入門教程【十六】調試神器 gui.js使用詳解，可視化面板控制場景參數提高開發效率
Three.js 快速入門教程【十七】射線拾取模型——射線與射線投射器Raycaster介紹
Three.js 快速入門教程【十八】射線拾取模型——鼠標點擊屏幕選中模型或物體
Three.js 快速入門教程【十九】CSS2D渲染器介紹，實現場景中物體或設備標注標簽信息
Three.js 快速入門教程【二十】3D模型加載優化實戰：使用gltf-pipeline與Draco對模型進行壓縮，提高加載速度和流暢性

---

---

一、前言

??????在 Three.js 開發中，3D 模型的體積直接影響加載性能與用戶體驗。gltf/glb 格式雖已是行業標準，但高精度模型仍需進一步壓縮。本文將詳細介紹基于 gltf-pipeline 工具鏈結合 Draco 算法的模型壓縮方案，涵蓋工具使用、實際項目開發中的實踐，助你構建高性能 3D 應用。

---

二、三維模型優化背景與工具選型

在WebGL三維可視化項目中，glTF格式因其高效性和通用性已成為事實標準格式。但未經處理的模型常存在以下痛點：

• 原始模型文件體積龐大（常見100MB+）

• 網絡傳輸耗時影響用戶體驗

• 瀏覽器解析壓力導致卡頓

為此，我們引入gltf-pipeline工具鏈，結合Google Draco壓縮算法，可達成：

• 模型體積縮減70%-90%

• 解析效率提升3-5倍

• 完美兼容主流WebGL框架

---

三、gltf-pipeline 介紹

gltf-pipeline 是 Cesium 開發的基于 Node.js 的開源 gltf/glb 模型轉換工具。它提供了一系列功能，包括將 gltf 轉換為 glb（或反向轉換）、將緩沖區 / 紋理保存為嵌入文件或單獨文件、將 gltf 1.0 模型轉換為 gltf 2.0 以及應用 Draco 網格壓縮等

3.1 安裝

#全局安裝
npm install -g gltf - pipeline

---

3.2 基礎轉換

gltf 轉 glb

gltf-pipeline -i model.gltf -o model.glb

glb 轉 gltf

gltf-pipeline -i model.glb -o model.gltf

單獨保存模型紋理

gltf-pipeline -i model.glb -t

---

3.3 Draco 網格壓縮

基礎命令：

gltf-pipeline -i model.gltf -o modelDraco.gltf -d

這里會使用 Draco 對模型進行壓縮，并生成帶有KHR_draco_mesh_compression擴展的 gltf 文件。

基礎命令后面可加如下一些常用命令行參數

• –draco.compressionLevel：Draco 壓縮級別（0 - 10）

  默認為 7，數值越大壓縮率越高，但可能會對模型的精度和視覺質量產生一定影響。0 表示最低壓縮級別（壓縮程度小，模型質量高），10 表示最高壓縮級別（壓縮程度大，可能損失一些細節）

• –draco.quantizePositionBits：坐標精度（建議10-16）,常用14(精度與體積平衡）

• –draco.quantizeNormalBits：法線方向（建議8-10）（法線方向對精度要求較低）

• –draco.quantizeTexcoordBits：紋理坐標（UV）（建議8-12）

示例：

gltf-pipeline -i input.gltf -o output.gltf   --draco.compressionLevel=10  --draco.quantizePositionBits=14 --draco.quantizeNormalBits=10 --draco.quantizeTexcoordBits=12

---

四、性能優化對比

測試模型數據：

---

五、Three.js項目中集成

通過 gltf-pipeline+Draco 網格壓縮后的gltf(glb)模型如果直接加載會報錯，需要通過draco模型解碼器解碼才能正常顯示。

下面以腳手架項目為例：

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./libs/draco/');//設置draco模型解碼器路徑，根據實際情況修改路徑
dracoLoader.setDecoderConfig({ type: 'js' }); //使用兼容性強的draco_decoder.js解碼器,兼容舊瀏覽器
dracoLoader.preload();const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);//設置draco模型加載器//加載模型
loader.load('model.glb', (gltf) => {scene.add(gltf.scene);
}, undefined, (error) => {console.error('DRACO解碼失敗:', error);
});

把draco模型解碼器文件拷貝到public文件夾下：

在node_modules依賴中找到three\examples\jsm\libs\draco 把draco 文件夾拷貝到public下新建的libs文件夾下

解碼器文件放置路徑隨意，只要保證dracoLoader.setDecoderPath(‘./libs/draco/’)入參路徑找得到就行了。

---

六、制作自動化腳本對模型進行壓縮

每次壓縮模型需要輸入那串長命令顯得特別繁瑣，我們可以制作bat腳本實現自動化壓縮：
新建一個txt文件改名為draco.bat,用編輯器打開寫入（參數值可以按需修改）：

@echo off
cd %~dp0
echo 正在壓縮，請耐心等待...npx gltf-pipeline -i input.gltf -o output.gltf   --draco.compressionLevel=10  --draco.quantizePositionBits=14 --draco.quantizeNormalBits=10 --draco.quantizeTexcoordBits=12
echo 命令執行完成
pause

在同級目錄放置未壓縮的模型input.gltf

雙擊draco.bat，進行壓縮，壓縮成功在同級目錄生成output.gltf文件

ps:演示動態圖以glb格式為例。

注意：
自動化腳本需要用到npx,如果你電腦npm 5.2.0 及以上版本，就已經自帶npx了，無需單獨安裝。
若你的 npm 版本低于 5.2.0，你可以通過更新 npm 來安裝npx，命令如下：

npm install -g npm@latest

---

七、總結

??????? gltf-pipeline 工具鏈結合 Draco 算法的模型壓縮方案是非常實用的模型壓縮方案。gltf - pipeline 提供了便捷的命令行工具和編程接口，方便對 gltf/glb 模型進行各種處理，包括 Draco 壓縮。在實際應用中，可以根據具體需求選擇合適的命令行參數對模型進行壓縮，以優化 3D 模型的存儲、傳輸和加載性能，為用戶提供更好的體驗。

更多three.js入門知識點請關注該系列教程后續的更新。