​压缩glb模型文件

 使用 gltf-pipeline 进行压缩:

GitHub地址icon-default.png?t=N7T8https://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 的作用,具体其他的可以参考文档 

 此时可以看到压缩分离后的效果:

 可以看到模型主要是以贴图为主,所以压缩效果不明显:

需要对图片进行批量压缩,这里用的是论坛大佬的工具,可以多支持:

吾爱破解论坛:批量压缩图片工具icon-default.png?t=N7T8https://www.52pojie.cn/forum.php?mod=viewthread&tid=1805974&highlight=VIKY

将图片选中直接全部拖进来压缩:

压缩图片前后对比 :

这里就压缩完成了, 接下来是在 three 中加载,因为使用了draco压缩,所以加载时需要配置解压文件:

将路径  \node_modules\three\examples\jsm\libs\draco  的这个draco文件夹复制到public文件夹下,如 public\draco。

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 => {   
        ...
    });
}

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值