Three.js 快速入门教程【二十】3D模型加载优化实战：使用gltf-pipeline与Draco对模型进行压缩，提高加载速度和流畅性

系列文章目录

文章目录

系列文章目录
一、前言
二、三维模型优化背景与工具选型
[三、gltf-pipeline 介绍](#三、gltf-pipeline 介绍)
- [3.1 安装](#3.1 安装)
- [3.2 基础转换](#3.2 基础转换)
- - [gltf 转 glb](#gltf 转 glb)
  - [glb 转 gltf](#glb 转 gltf)
  - 单独保存模型纹理
- [3.3 Draco 网格压缩](#3.3 Draco 网格压缩)
四、性能优化对比
五、Three.js项目中集成
六、制作自动化脚本对模型进行压缩
七、总结

一、前言

在 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 安装

javascript 复制代码

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

3.2 基础转换

gltf 转 glb

javascript 复制代码

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

glb 转 gltf

javascript 复制代码

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

单独保存模型纹理

javascript 复制代码

gltf-pipeline -i model.glb -t

3.3 Draco 网格压缩

基础命令：

javascript 复制代码

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）

示例：

javascript 复制代码

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模型解码器解码才能正常显示。

下面以脚手架项目为例：

javascript 复制代码

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,用编辑器打开写入（参数值可以按需修改）：

javascript 复制代码

@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，命令如下：

javascript 复制代码

npm install -g npm@latest

七、总结

gltf-pipeline 工具链结合 Draco 算法的模型压缩方案是非常实用的模型压缩方案。gltf - pipeline 提供了便捷的命令行工具和编程接口，方便对 gltf/glb 模型进行各种处理，包括 Draco 压缩。在实际应用中，可以根据具体需求选择合适的命令行参数对模型进行压缩，以优化 3D 模型的存储、传输和加载性能，为用户提供更好的体验。

更多three.js入门知识点请关注该系列教程后续的更新。