位置: IT常识 - 正文

压缩gltf/glb模型踩坑与解决 three.js DRACOLoader(压缩模制)

编辑:rootadmin
压缩gltf/glb模型踩坑与解决 three.js DRACOLoader 前言

推荐整理分享压缩gltf/glb模型踩坑与解决 three.js DRACOLoader(压缩模制),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:压缩模制,模型压缩综述,压缩模设计,压缩模制,压缩模型怎么做,压缩模型怎么做,压缩模设计,模型压缩综述,内容如对您有帮助,希望把文章链接给更多的朋友!

使用前端three.js加载3d模型过程中,往往会出现模型大小过大导致前端加载时间过长,降低用户体验。 本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。

所采用的three库版本为 ^0.138.2

解决方案与介绍

通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。

并且有如下的作用

将 glTF 转换为 glb(和反向)将缓冲区/纹理保存为嵌入或单独的文件将 glTF 1.0 模型转换为 glTF 2.0(使用KHR_techniques_webgl和KHR_blend扩展)应用Draco网格压缩安装npm install -g gltf-pipeline

或者

yarn global add gltf-pipeline常用压缩命令gltf-pipeline -i model.glb -o modelDraco.glb -d

使用 Draco 压缩网格 model.glb 文件,modelDraco.glb为压缩后输出文件名

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

压缩并编写单独的缓冲区、着色器和纹理。

在three.js中使用Draco压缩网格后的文件坑与解决过程

在多次百度之后写出的代码

let dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath("path"); dracoLoader.preload();const loader = new GLTFLoader().setPath("path");loader.setDRACOLoader(dracoLoader);loader.load("modelName", (gltf) => { scene.addObject(gltf.scene); gltf = null;});压缩gltf/glb模型踩坑与解决 three.js DRACOLoader(压缩模制)

在这里我遇到了一个大坑:

Uncaught SyntaxError: Unexpected token '<'

解决:

在问题过程排查中,发现网络请求是请求了模型数据的

后续发现bolb:xxx的请求不是写的应用层所发出的 之后通过阅读DRACOLoader.js的源码得

网络请求中bolb:xxx请求是由第250行URL.createObjectURL所创建的,创建该请求需要

draco_decoder.jsdraco_wasm_wrapper.jsdraco_decoder.wasm

并且请求的路径是使用setDecoderPath方法所设定

后续查阅资料得到

draco_decoder.js— Emscripten 编译的解码器,与任何现代浏览器兼容。draco_decoder.wasm— WebAssembly 解码器,与较新的浏览器和设备兼容。draco_wasm_wrapper.js— WASM 解码器的 JavaScript 包装器。

在node_modules安装的包中获取three版本对应的draco路径为 node_modules\three\examples\js\libs

将改文件夹复制到public文件夹下并在DRACOLoader.setDecoderPath时候设置该对应路径即可

最后的解决代码与自己的封装import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";/** * * path:存放模型父路径 * modelName:模型名 * setCenter:是否居中 * scale:模型的缩放比设定 * position:模型的位置 * rotation:模型的局部旋转 */function loadModuleByDRACOLoader( path, modelName, setCenter, scale, position, rotation) { let scaleVec3, positionVec3; if (typeof scale == "number") { scaleVec3 = new THREE.Vector3(scale, scale, scale); } else { scaleVec3 = new THREE.Vector3(scale.x, scale.y, scale.z); } if (typeof position == "number") { positionVec3 = new THREE.Vector3(position, position, position); } else { positionVec3 = new THREE.Vector3(position.x, position.y, position.z); } let dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath("./moduler/draco/"); // 设置public下的解码路径,注意最后面的/ dracoLoader.setDecoderConfig({ type: "js" }); //使用兼容性强的draco_decoder.js解码器 dracoLoader.preload(); const loader = new GLTFLoader().setPath(path); loader.setDRACOLoader(dracoLoader); return new Promise((res, rj) => { loader.load(modelName, (gltf) => { if (setCenter) { gltf.scene.traverse(function(child) { if (setCenter && child.isMesh) { child.geometry.center(); } }); } gltf.scene.scale.copy(scaleVec3); gltf.scene.position.copy(positionVec3); if (rotation) { gltf.scene.rotation.copy(rotation); } scene.add(gltf.scene); res(gltf.scene); gltf = null; }); });}

调用

loadModuleByDRACOLoader('./moduler/', "grow4-processed.glb", false, 1, 0)结语

因为遇到这个坑之后没有找到对应的解决方法,所以写了该文章作为记录也给遇到相同问题的开发者避坑。

还有🎇🎇大三求内推🎇🎇

本文链接地址:https://www.jiuchutong.com/zhishi/283920.html 转载请保留说明!

上一篇:吃鸡显卡用GTX1060好还是RX580好?(吃鸡显卡推荐配置1060 5g)

下一篇:vue 中从后端获取到文件的 url 地址,前端根据 url 地址下载文件(vue怎么拿到后端数据)

  • 新手教程:快速让网站收录的方法(新手如何快速学车)

    新手教程:快速让网站收录的方法(新手如何快速学车)

  • excel如何填充几千个序号(excel如何填充几千列的公式)

    excel如何填充几千个序号(excel如何填充几千列的公式)

  • 两台苹果手机怎么转移通讯录(两台苹果手机怎么传输数据)

    两台苹果手机怎么转移通讯录(两台苹果手机怎么传输数据)

  • 怎么取消自己qq被赞动画(怎么取消自己的抖音)

    怎么取消自己qq被赞动画(怎么取消自己的抖音)

  • Excel表格中除法公式怎么输(Excel表格中除法怎么弄)

    Excel表格中除法公式怎么输(Excel表格中除法怎么弄)

  • 苹果自带键盘有震动吗(苹果自带键盘有九键吗)

    苹果自带键盘有震动吗(苹果自带键盘有九键吗)

  • 抖音隐藏作品会降权吗(抖音隐藏作品会显示数量吗)

    抖音隐藏作品会降权吗(抖音隐藏作品会显示数量吗)

  • z8350处理器相当于i几(z8350cpu性能相当于台机什么级别)

    z8350处理器相当于i几(z8350cpu性能相当于台机什么级别)

  • 为什么共享位置看不到对方(为什么共享位置显示未与iPhone关联)

    为什么共享位置看不到对方(为什么共享位置显示未与iPhone关联)

  • iphone11出厂带贴膜吗(苹果11出场带膜吗)

    iphone11出厂带贴膜吗(苹果11出场带膜吗)

  • 美图手机卡顿怎么解决(美图手机特别卡)

    美图手机卡顿怎么解决(美图手机特别卡)

  • 为什么苹果手机闹钟铃声和设置的不一样(为什么苹果手机连不上wifi)

    为什么苹果手机闹钟铃声和设置的不一样(为什么苹果手机连不上wifi)

  • 通常所说的计算机的主机是(通常所说的计算机主机主要由诺依曼结构)

    通常所说的计算机的主机是(通常所说的计算机主机主要由诺依曼结构)

  • 苹果appid是什么(苹果手机appieid是什么)

    苹果appid是什么(苹果手机appieid是什么)

  • 怎么取消分页符word(怎么取消分页符产生的空白页)

    怎么取消分页符word(怎么取消分页符产生的空白页)

  • 换货商品属性怎么填(淘宝上换货商品属性是什么意思?)

    换货商品属性怎么填(淘宝上换货商品属性是什么意思?)

  • 快手怎么看直播回放(快手怎么看直播时长)

    快手怎么看直播回放(快手怎么看直播时长)

  • 建立索引时要考虑哪些不利因素(建立索引时要考虑的因素)

    建立索引时要考虑哪些不利因素(建立索引时要考虑的因素)

  • 钉钉聊天记录怎么导出(钉钉聊天记录怎么同步到另一台手机)

    钉钉聊天记录怎么导出(钉钉聊天记录怎么同步到另一台手机)

  • ipad可以连接小米蓝牙耳机吗(iPad可以连接小米无线耳机吗)

    ipad可以连接小米蓝牙耳机吗(iPad可以连接小米无线耳机吗)

  • 朋友圈文字不折叠(朋友圈文字不折叠怎么设置)

    朋友圈文字不折叠(朋友圈文字不折叠怎么设置)

  • 华为vle一al10是什么型号(华为vie al10)

    华为vle一al10是什么型号(华为vie al10)

  • 王者荣耀中甄姬技能有哪些?(王者荣耀中甄姬的cp是谁)

    王者荣耀中甄姬技能有哪些?(王者荣耀中甄姬的cp是谁)

  • uniApp常见面试题(uniapp相关面试题)

    uniApp常见面试题(uniapp相关面试题)

  • Jasper Report详细使用教程(保姆级教程),整合Springboot使用(jasperreports入门)

    Jasper Report详细使用教程(保姆级教程),整合Springboot使用(jasperreports入门)

  • 织梦自动提取关键字无法关闭的解决方法(织梦如何做提取卡密)

    织梦自动提取关键字无法关闭的解决方法(织梦如何做提取卡密)

  • 哪些企业可以出2.2证书
  • 出口免税收入会退税吗
  • 积分换物品是真的吗
  • 劳务报酬和工资薪金哪个税率高
  • 公司汽车上牌费入什么科目
  • 2019年一季度季报怎样填写
  • 企业内部转账应注意什么
  • 存出资本保证金是金融资产吗
  • 科技公司的成本如何核算
  • 帮别人开票收税点怎么做账
  • 营改增后不动产销售增值税 5%还是9%
  • 国税注销地税没注销怎么办
  • 车改补贴是否计入工资总额
  • 员工报销油费计入个税吗
  • 企业店铺开发票可以要求补税点吗?
  • 统一员工行为规范
  • 会计员如何处理21种差额计税?
  • 个人缴纳的住房公积金可以提现吗
  • 防伪开票系统税票如何抵扣
  • 孵化器虚拟地址多少钱一个啊
  • 未认证进项税额转出
  • 物业公司营改增后收入的确认
  • 固定资产折旧年限的最新规定2023
  • 审图费发票需要备注吗
  • 金税盘上传参数测试连接失败
  • 如何进行网络测试网速测试
  • 怎样查一个银行的行号
  • 王者荣耀中孙尚香怎么玩
  • 如何禁止远程
  • 资不抵债从资产负债表上怎么看出来
  • 暂存款转结余
  • php日期差
  • php数组函数题目
  • 哪些发票不能进账
  • 房地产销售未完工产品收入是含税的吗
  • 集体租赁住房有房产证吗
  • php中session什么意思
  • php php.ini
  • 企业会计准则季报利润表本期金额怎么填
  • 支付版权费用账号是什么
  • 电子承兑非拒付追索待清偿
  • 报关代理费计入什么科目
  • 企业净利润率是多少好
  • 存货跌价准备科目余额在哪方
  • 企业转让时应收账款如何处理
  • 如何理解符合立案标准的,行政机关应当及时立案
  • 收支平衡表excel怎么做
  • sql server中的编程语言
  • 基本生产成本核算的内容
  • 企业期末预收账款怎么算
  • 企业跨年度的收入退回应该如何进行会计处理?
  • 预收账款冲销账户怎么做
  • 业务协作费计入什么科目
  • 替其他公司支付工资怎么做账
  • 进项税转出的金额是什么
  • 错开发票所需要提供的资料以及时效要求是?
  • 事业单位可以报考事业单位吗
  • 业务招待费管理草案探讨
  • 代理记账公司都是假账么
  • 残保金减免优惠政策2023最新
  • 企业建账要求
  • 会计账簿按外表形式分
  • sql时间类型转换
  • 探讨探讨
  • 高效的sql语句
  • mysql 多表联合更新
  • windows命令提示符重启
  • iexploresrv.exe
  • centos6.5配置ssh
  • win7旗舰版64位系统开机时软件设置自动启动详细图文教程
  • javascript基础
  • 快速掌握押韵技巧
  • 批处理常用命令总结
  • 点击滑块是什么意思
  • 谈谈jQuery Ajax用法详解
  • 基于android的app
  • kmp算法代码完整实现
  • unity的shader用法
  • 广告行业税率6%包含的内容
  • 电子税务局帐号不知道怎么找
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设