three.js DRACOLoader压缩模型

安装gltf-pipeline

• 全局安装gltf-pipeline  npm i -g gltf-pipeline
• gltf-pileline优点
  • gltf和glb模型相互转换
  • 压缩gltf和glb 
  • 可以选择分离纹理图片
  • 获取glb或gltf信息资源
• 使用终端运行

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

• 参数	描述	必须/默认
  --help, -h	查看帮助	No
  --input, -i	输入一个gltf模型文件.	✅ Yes
  --output, -o	输出一个gltf或者glb文件，文件会存储在相同的目录	No
  --binary, -b	转换gltf模型到glb模型	No, default false
  --json, -j	转换glb模型到gltf模型	No, default false
  --separate, -s	分离纹理图片和bin文件至单独的文件	No, default false
  --separateTextures, -t	仅仅只分离纹理图片	No, default false
  --stats	在终端输出gltf文件信息	No, default false
  --keepUnusedElements	保存未使用过的材质，节点，网格对象	No, default false
  --draco.compressMeshes, -d	使用Draco经行压缩，默认不压缩	No, default false
  --draco.compressionLevel	压缩的级别0-10 级别越大，压缩程度越大，文件越小	No, default 7
  --draco.quantizePositionBits	使用 Draco 压缩时位置属性的量化位.  取值为0-29，值越小，文件越小	No, default 14
  --draco.quantizeNormalBits	Quantization bits for normal attribute when using Draco compression.	No, default 10
  --draco.quantizeTexcoordBits	Quantization bits for texture coordinate attribute when using Draco compression.	No, default 12
  --draco.quantizeColorBits	Quantization bits for color attribute when using Draco compression.	No, default 8
  --draco.quantizeGenericBits	Quantization bits for skinning attribute (joint indices and joint weights) and custom attributes when using Draco compression.	No, default 12
  --draco.unifiedQuantization	Quantize positions of all primitives using the same quantization grid. If not set, quantization is applied separately.	No, default false

  后面几个参数一般来说都用不到 一般会添加-b在加一个压缩级别

使用node写了一个批处理文件，运行之前先安装gltf-pipeline和fs-extra包

const gltfPipeline = require('gltf-pipeline');
const fsExtra = require('fs-extra');
const glbToGlb = gltfPipeline.processGlb;
let dirs = fsExtra.readdirSync('./originModels')
let count = 0 , total = dirs.length
dirs.map(dir => {
    fsExtra.readFile(`./originModels/${dir}`).then(glb => {
        glbToGlb(glb, {
            dracoOptions: {
                compressionLevel: 10,
                compressMeshes : true
            },
            stats : true
        }).then(({glb}) => {
            fsExtra.writeFile(`./targetModels/${dir}`, glb).then(() => {
                count++
                console.log(`模型压缩${count}/${total}`)
                if(count == total) {
                    console.log('模型压缩完成')
                }
            })
        })
    })
})

目录如下，在该文件下面建立两个originModels和targetModels文件夹

模型压缩完成对比图

前端three.js库经行加载

虽然导出的也是glb模型，但直接使用gltfLoader经行加载会加载失败，必须经过DRACOLoader经行转换,在转换之前引入三个资源文件,都可以在github three.js官方库中下载

• GLTFLoader.js      three.js\examples\jsm\loaders\GLTFLoader.js
• DRACOLoader.js    three.js\examples\jsm\loaders\DRACOLoader.js
• DRACOLoader解码库  three.js\examples\js\libs\draco\gltf

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader  } from 'three/examples/jsm/loaders/DRACOLoader'
import {LoadingManager} from 'three'

const loader = new GLTFLoader(new LoadingManager());  //实时显示进度
DRACOLoader.setDecoderPath( 'three.js/examples/js/libs/draco/gltf/' );//设置解压库文件路径
const dracoLoader = new DRACOLoader();  //
dracoLoader.setDecoderConfig({type: 'js'})  //使用js方式解压
dracoLoader.preload()  //初始化_initDecoder 解码器
loader.setDRACOLoader(dracoLoader)   //gltfloader使用dracoLoader

let url = "models/yalj.glb"
loader.load(url, ({scene}) => {
    //处理加载过来的模型
} , xhr => {
    //处理加载的进度
}, error => {
    //加载错误时触发
})

错误处理

出现这样的错误 是没有正确配置解码器

dracoLoader.setDecoderConfig({type: 'js'})  //使用js方式解压
dracoLoader.preload()  //初始化_initDecoder 解码器