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

压缩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;});

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

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)结语

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

还有🎇🎇大三求内推🎇🎇