系列文章目录Three.js 快速入门教程【一】开启你的 3D Web 开发之旅Three.js 快速入门教程【二】透视投影相机Three.js 快速入门教程【三】渲染器Three.js 快速入门教程【四】三维坐标系Three.js 快速入门教程【五】动画渲染循环Three.js 快速入门教程【六】相机控件 OrbitControlsThree.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使用指南文章目录系列文章目录一、前言二、三维模型优化背景与工具选型三、gltf-pipeline 介绍3.1 安装3.2 基础转换gltf 转 glbglb 转 gltf单独保存模型纹理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 安装#全局安装 npm install-g gltf-pipeline3.2 基础转换gltf 转 glbgltf-pipeline-i model.gltf-o model.glbglb 转 gltfgltf-pipeline-i model.glb-o model.gltf单独保存模型纹理gltf-pipeline-i model.glb-t3.3 Draco 网格压缩基础命令gltf-pipeline-i model.gltf-o modelDraco.gltf-d这里会使用 Draco 对模型进行压缩并生成带有KHR_draco_mesh_compression扩展的 gltf 文件。基础命令后面可加如下一些常用命令行参数–draco.compressionLevelDraco 压缩级别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.compressionLevel10--draco.quantizePositionBits14--draco.quantizeNormalBits10--draco.quantizeTexcoordBits12四、性能优化对比测试模型数据五、Three.js项目中集成通过 gltf-pipelineDraco 网格压缩后的gltf(glb)模型如果直接加载会报错需要通过draco模型解码器解码才能正常显示。下面以脚手架项目为例import{GLTFLoader}fromthree/examples/jsm/loaders/GLTFLoader.js;import{DRACOLoader}fromthree/examples/jsm/loaders/DRACOLoader;import{GLTFLoader}fromthree/addons/loaders/GLTFLoader.js;import{DRACOLoader}fromthree/addons/loaders/DRACOLoader.js;constdracoLoadernewDRACOLoader();dracoLoader.setDecoderPath(./libs/draco/);//设置draco模型解码器路径根据实际情况修改路径dracoLoader.setDecoderConfig({type:js});//使用兼容性强的draco_decoder.js解码器,兼容旧浏览器dracoLoader.preload();constloadernewGLTFLoader();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.compressionLevel10--draco.quantizePositionBits14--draco.quantizeNormalBits10--draco.quantizeTexcoordBits12echo 命令执行完成 pause在同级目录放置未压缩的模型input.gltf双击draco.bat进行压缩压缩成功在同级目录生成output.gltf文件ps:演示动态图以glb格式为例。注意自动化脚本需要用到npx,如果你电脑npm 5.2.0 及以上版本就已经自带npx了无需单独安装。若你的 npm 版本低于 5.2.0你可以通过更新 npm 来安装npx命令如下npm install-g npmlatest七、总结gltf-pipeline 工具链结合 Draco 算法的模型压缩方案是非常实用的模型压缩方案。gltf - pipeline 提供了便捷的命令行工具和编程接口方便对 gltf/glb 模型进行各种处理包括 Draco 压缩。在实际应用中可以根据具体需求选择合适的命令行参数对模型进行压缩以优化 3D 模型的存储、传输和加载性能为用户提供更好的体验。更多three.js入门知识点请关注该系列教程后续的更新。