使用?gltf-pipeline进行压缩:
GitHub地址[这里是图片001]https://github.com/CesiumGS/gltf-pipeline
1. 安装gltf-pipeline
npm install -g gltf-pipeline
2. 在glb文件目录打开cmd进行命令行压缩:
// cmd:
gltf-pipeline -i glb.glb -d -s
以下是 -d 和 -s 的作用,具体其他的可以参考文档
此时可以看到压缩分离后的效果:
可以看到模型主要是以贴图为主,所以压缩效果不明显:
需要对图片进行批量压缩,这里用的是论坛大佬的工具,可以多支持:
吾爱破解论坛:批量压缩图片工具[这里是图片006]https://www.52pojie.cn/forum.php?mod=viewthread&tid=1805974&highlight=VIKY
将图片选中直接全部拖进来压缩:
压缩图片前后对比 :
这里就压缩完成了, 接下来是在 three 中加载,因为使用了draco压缩,所以加载时需要配置解压文件:
将路径 ode_modules hreeexamplesjsmlibsdraco 的这个draco文件夹复制到public文件夹下,如 publicdraco。
Vue加载:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
//加载glb模型
const loadGLTF = () => {
let dracoLoader = new DRACOLoader();
let loader = new GLTFLoader();
dracoLoader.setDecoderPath('/draco/'); //publish目录下的解压缩路径
loader.setDRACOLoader(dracoLoader); //加载文件
loader.load("...glb文件路径", glb => {
...
});
}