安装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
-
后面几个参数一般来说都用不到 一般会添加-b在加一个压缩级别参数 描述 必须/默认 --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
使用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 解码器