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

系列文章目录

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 快速入门教程【二十】三维模型优化实战：使用gltf-pipeline与Draco对模型进行压缩，提高加载速度和流畅性
Three.js 快速入门教程【二十一】CSS3D渲染器（CSS3DRenderer、CSS3DObject 、CSS3DSprite）介绍，实现场景中物体标注标签信息
Three.js 快速入门教程【二十二】动画神器Tween.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 安装

#全局安装 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';constdracoLoader=newDRACOLoader();dracoLoader.setDecoderPath('./libs/draco/');//设置draco模型解码器路径，根据实际情况修改路径dracoLoader.setDecoderConfig({type:'js'});//使用兼容性强的draco_decoder.js解码器,兼容旧浏览器dracoLoader.preload();constloader=newGLTFLoader();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=12echo 命令执行完成 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入门知识点请关注该系列教程后续的更新。