位置: 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怎么拿到后端数据)

  • 粤康码颜色代表什么意思(粤康码颜色变色规则)

    粤康码颜色代表什么意思(粤康码颜色变色规则)

  • 论坛推广发帖技巧 怎么在论坛发帖推广(论坛推广发帖技巧和方法)

    论坛推广发帖技巧 怎么在论坛发帖推广(论坛推广发帖技巧和方法)

  • 怎样创造博客网络营销模式影响力(创建博客的步骤)

    怎样创造博客网络营销模式影响力(创建博客的步骤)

  • iphone13mini重量(苹果13mini尺寸重量)

    iphone13mini重量(苹果13mini尺寸重量)

  • 抖音点赞怎么变成狮子头(抖音点赞怎么变成推荐怎么没有)

    抖音点赞怎么变成狮子头(抖音点赞怎么变成推荐怎么没有)

  • oppoa9突然循环重启打不开机(解决oppo手机无限循环重启图解)

    oppoa9突然循环重启打不开机(解决oppo手机无限循环重启图解)

  • 小米打印机可以双面打印吗(小米打印机可以远程手机打印吗)

    小米打印机可以双面打印吗(小米打印机可以远程手机打印吗)

  • ios系统降级关闭了吗

    ios系统降级关闭了吗

  • b站表情包怎么导出(B站表情包怎么下载)

    b站表情包怎么导出(B站表情包怎么下载)

  • 学习通开摄像头有声音吗

    学习通开摄像头有声音吗

  • 数据线突然不支持了(数据线怎么突然就不支持了)

    数据线突然不支持了(数据线怎么突然就不支持了)

  • 华为mate10充电器规格(华为mate10充电器接口)

    华为mate10充电器规格(华为mate10充电器接口)

  • 手机上时间和天气怎么显示到桌面上(手机上时间和天气)

    手机上时间和天气怎么显示到桌面上(手机上时间和天气)

  • 仅限紧急呼叫是卡坏了吗(仅限紧急呼叫是欠费了还是注销了)

    仅限紧急呼叫是卡坏了吗(仅限紧急呼叫是欠费了还是注销了)

  • 淘宝代销和分销的区别(在淘宝分销跟代发是一样的吗)

    淘宝代销和分销的区别(在淘宝分销跟代发是一样的吗)

  • 笔记本内存条低压和标压区别(笔记本内存条低电压)

    笔记本内存条低压和标压区别(笔记本内存条低电压)

  • 闲鱼按距离估算运费是怎么收的(闲鱼按距离估算运费算买家还是卖家付)

    闲鱼按距离估算运费是怎么收的(闲鱼按距离估算运费算买家还是卖家付)

  • 华为m30和m30pro有什么不同(华为m30pro和m30e pro区别)

    华为m30和m30pro有什么不同(华为m30pro和m30e pro区别)

  • 光猫连不上网怎么办(光猫连不上网怎么回事)

    光猫连不上网怎么办(光猫连不上网怎么回事)

  • qq怎么做闺蜜关系(qq怎么搞闺蜜关系)

    qq怎么做闺蜜关系(qq怎么搞闺蜜关系)

  • 抖音mcn入驻条件(抖音mcn机构入驻条件)

    抖音mcn入驻条件(抖音mcn机构入驻条件)

  • 淘宝注销了手机号还能注册吗(淘宝注销了手机号也会跟着解绑吗)

    淘宝注销了手机号还能注册吗(淘宝注销了手机号也会跟着解绑吗)

  • 荣耀20怎么信任软件(荣耀怎么信任应用)

    荣耀20怎么信任软件(荣耀怎么信任应用)

  • 云闪付多久到账(云闪付)

    云闪付多久到账(云闪付)

  • icloud空间已满什么意思(解决icloud空间已满)

    icloud空间已满什么意思(解决icloud空间已满)

  • 百度贴吧如何取消关注(百度贴吧如何取消水印)

    百度贴吧如何取消关注(百度贴吧如何取消水印)

  • 网易考拉怎么申请会员(网易考拉怎么入驻商家)

    网易考拉怎么申请会员(网易考拉怎么入驻商家)

  • 鸿蒙系统控制中心在哪?鸿蒙系统控制中心自定义设置教程(鸿蒙系统控制中心)

    鸿蒙系统控制中心在哪?鸿蒙系统控制中心自定义设置教程(鸿蒙系统控制中心)

  • 深究Python中的asyncio库-线程同步

    深究Python中的asyncio库-线程同步

  • 帝国cms收录好吗(帝国cms使用手册)

    帝国cms收录好吗(帝国cms使用手册)

  • 小规模升级为一般人后之前取得的增值税专用发票抵扣
  • 定额备用金与非定额备用金的会计分录
  • 工商股权转让费用怎么算
  • 企业筹建期间利息支出税前扣除怎么算
  • 取得预收租金应如何申报缴税
  • 几年前的发票能入账吗
  • 转让生产指标的企业所得税
  • 开具不规范的发票
  • 现金出资可以吗
  • 企业申请核定征收的要求
  • 营改增以前建筑税率
  • 金税盘费用到期
  • 用友t3建新账
  • 发票连号不许报销吗
  • 可转债转换为股权投资的企业所得税处理
  • 公益事业捐赠
  • 有限的访问权限是什么意思
  • 应收账款的账面余额公式
  • 应付工程款账务处理
  • 会计分录的正确书写格式图片
  • 股权转让的会计凭证
  • 技术服务合同要盖骑缝章吗
  • windows已禁用
  • php随机生成1到3的数字
  • 跟银行借入长期存款
  • nuxt怎么用
  • vue引入echarts柱状图
  • 期间费用的会计科目
  • 不动产抵债的销售额
  • python自动化selenium
  • set0
  • kk协议
  • openpose的输出
  • 医学图像处理的步骤一是设计
  • 软考软件设计师考试时间
  • 新公司固定资产怎么登记
  • 旅行发票可以做账吗
  • 生产过程半成品报废
  • 发票货物或应税劳务名称怎么填写
  • 分公司二季度安全生产分析会内容
  • 房产税计入管理费用还是营业税金及附加
  • 发票抵扣联和发票联区别
  • 简易记账和复式记账
  • 企业没有研发费用怎么做账
  • 织梦怎么套模板
  • mysql5.5命令
  • mongodb 随机获取一条数据
  • 报销凭证粘贴单怎么用
  • 个体工商户增值税申报操作流程
  • SQL中DATEADD和DATEDIFF的用法示例介绍
  • 工会经费和残保金计入什么科目
  • 可转债中签后怎么看涨跌
  • 增值税及附加税计算公式
  • 委托生产的会计分录
  • 支付政协扶贫款怎么做账
  • 建筑行业有哪些生意可以做
  • 投资利润率怎么看投资好还是不好
  • 出口退税的会计处理
  • 财政登记证取消了吗
  • 鉴证咨询公司
  • 待清算商户消费款项是什么
  • 携税宝费用可以抵扣增值税吗
  • mysql怎么实现
  • win10打开cad出现致命错误
  • fdisk 分区表
  • windowsxp还能正常使用吗
  • linux 磁盘情况
  • xp系统打不开电脑
  • centos最小化安装配置网络
  • python网络编程视频教程
  • js点击按钮返回前一个页面
  • dos命令显示时间
  • 一个简单的合并单元
  • u3d unity3d
  • javascript如何
  • JavaScript中getUTCMinutes()方法的使用详解
  • unity3d shader之God Ray上帝之光
  • js 原型方法
  • jquery根据name
  • 税务登记注销证明是什么样的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设