将glb转换为draco glb前端

Question

是否有任何方法将glb文件编码并转换为只在前端(客户端)的draco glb？

Answer 1

是的，这可以用glTF-变换实现。还有一个在three.js上打开特性请求，还没有实现。

首先，您需要下载Draco编码器/解码器库 (当前发布给NPM的版本不工作客户端)，将它们保存在文件夹中，然后将它们作为全局脚本标记加载。应该有六个文件和两个脚本标记(这将加载剩余的文件)。

文件：

• draco_decoder.js
• draco_decoder.wasm
• draco_wasm_wrapper.js
• draco_encoder.js
• draco_encoder.wasm
• draco_encoder_wrapper.js

<script src="assets/draco_encoder.js"></script>
<script src="assets/draco_decoder.js"></script>

然后，您需要编写代码来加载GLB文件，应用压缩，并对压缩结果做一些事情。这将需要首先安装下面所示的两个包，然后用您选择的工具捆绑web应用程序(我在这里使用了https://www.snowpack.dev/ )。

import { WebIO } from '@gltf-transform/core';
import { DracoMeshCompression } from '@gltf-transform/extensions';

const io = new WebIO()
    .registerExtensions([DracoMeshCompression])
    .registerDependencies({
        'draco3d.encoder': await new DracoEncoderModule(),
        'draco3d.decoder': await new DracoDecoderModule(),
    });

// Load an uncompressed GLB file.
const document = await io.read('./assets/Duck.glb');

// Configure compression settings.
document.createExtension(DracoMeshCompression)
    .setRequired(true)
    .setEncoderOptions({
        method: DracoMeshCompression.EncoderMethod.EDGEBREAKER,
        encodeSpeed: 5,
        decodeSpeed: 5,
    });

// Create compressed GLB, in an ArrayBuffer.
const arrayBuffer = io.writeBinary(document); // ArrayBuffer