##1.Mac电脑上glb查看工具安装方式：###1.1下载插件工具文件```https://github.com/magicien/GLTFQuickLook/releases/latest```从这个地址下载一个叫做GLTFQuickLook.qlgenerator的文件，大概是这样子的，【如果嫌弃下载比较慢，可以从文后面的demo中获取这个文件】![quicklook2.png](https://upload-images.jianshu.io/upload_images/2261629-a69ea4d9af8cb3ad.png?imageMogr2/auto-orient/strip%

1.准备工作将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。控制器： OrbitControls.js加载器：GLTFLoader.js材质： RoomEnvironment.js和MeshoptDecoder.js模型文件：我这里用的是glb（最后面有源码链接）将上面的文件准备好后就可以开始进行下一步了2.开始开发1.在body中新建一个div用来承载three.js创建canvas标签2.把准备好的文件引入，注意script标签加上type=module部分代码在这，完成源码在下面，这里方便理解 import*a

1.准备工作将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。控制器： OrbitControls.js加载器：GLTFLoader.js材质： RoomEnvironment.js和MeshoptDecoder.js模型文件：我这里用的是glb（最后面有源码链接）将上面的文件准备好后就可以开始进行下一步了2.开始开发1.在body中新建一个div用来承载three.js创建canvas标签2.把准备好的文件引入，注意script标签加上type=module部分代码在这，完成源码在下面，这里方便理解 import*a

前言使用前端three.js加载3d模型过程中，往往会出现模型大小过大导致前端加载时间过长，降低用户体验。本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。所采用的three库版本为^0.138.2解决方案与介绍通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。并且有如下的作用将glTF转换为glb（和反向）将缓冲区/纹理保存为嵌入或单独的文件将glTF1.0模型转换为glTF2.0（使用KHR_techniques_webgl和KHR_blend扩展）应用Draco网格压缩安装npminstall-ggltf-pi

前言使用前端three.js加载3d模型过程中，往往会出现模型大小过大导致前端加载时间过长，降低用户体验。本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。所采用的three库版本为^0.138.2解决方案与介绍通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。并且有如下的作用将glTF转换为glb（和反向）将缓冲区/纹理保存为嵌入或单独的文件将glTF1.0模型转换为glTF2.0（使用KHR_techniques_webgl和KHR_blend扩展）应用Draco网格压缩安装npminstall-ggltf-pi