Reactjs 如何将gltf编码/压缩到draco

我想用draco在threejs和reactjs中编程压缩/编码gltf文件。我不想使用任何命令行工具，我希望它是编程完成的。请给我一个解决方案

---

我尝试使用gltf管道，但它在客户端不起作用。当我在reactjs中使用铯库时，它显示错误。

是的，这是可以用实现的。还有一个，尚未实施

首先，您需要（当前发布到NPM的版本在客户端不起作用），将它们托管在一个文件夹中，然后将它们作为全局脚本标记加载。应该有六个文件和两个脚本标记（将加载其余文件）

档案：

• draco_解码器.js
• draco_解码器.wasm
• draco_wasm_wrapper.js
• draco_编码器.js
• draco_编码器.wasm
• draco_编码器_包装器.js

然后，您需要编写代码来加载GLB文件，应用压缩，并对压缩后的结果进行处理。这将需要首先安装下面显示的两个包，然后将web应用程序与您选择的工具捆绑（我在这里使用）

从'@gltf transform/core'导入{WebIO}；
从'@gltf transform/extensions'导入{DracoMeshCompression}；
常量io=新的WebIO（）
.registerExtensions（[DracoMeshCompression]）
.registerDependencies({
“draco3d.encoder”：等待新的DracoEncoderModule（），
“draco3d.decoder”：等待新的DracoCoderModule（），
});
//加载未压缩的GLB文件。
const document=wait io.read（'./assets/Duck.glb'）；
//配置压缩设置。
document.createExtension（DracoMeshCompression）
.setRequired（true）
.SetEncodeProptions({
方法：DracoMeshCompression.EncoderMethod.EDGEBREAKER，
编码速度：5，
解码速度：5，
});
//在ArrayBuffer中创建压缩的GLB。
常量arrayBuffer=io.writeBinary（文档）；//阵列缓冲器

不幸的是，我认为Draco编码器没有客户端专用的JavaScript实现，只有解码器。我们可以在客户端（Reactjs）使用gltf管道进行Draco压缩吗？哦，对不起，我错了。我想他们确实把编码和解码连接起来了，至少在gltf管道中的NodeJS代码中是这样。不过，我从未尝试过在浏览器中运行该客户端，不知道如何使其工作。感谢您的回复非常感谢您的回答。但是我想压缩一个场景。我认为使用

WebIO

我只能给出文件uri。有可能直接给出文件或blob而不是uri吗？明白了，我可以使用readBinary方法