将glb转换为draco glb前端[关闭]答案

【问题标题】：Convert glb to draco glb front end [closed]将glb转换为draco glb前端[关闭]
【发布时间】：2021-07-02 15:16:24
【问题描述】：

有没有办法仅在前端（客户端）将 glb 文件编码和转换为 draco glb？

【问题讨论】：

stackoverflow.com/questions/57054435/… 中可能重复。我没有在那里复制我的答案，以避免标记重复的答案。
由于此问题已关闭，我已将我的答案移至上面链接的仍然打开的问题版本。

【解决方案1】：

是的，这可以通过glTF-Transform 来实现。还有一个open feature request on three.js，尚未实现。

首先你需要download the Draco encoder/decoder libraries（当前发布到 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

【讨论】：

感谢您的解决方案，它运行良好，因为我正在工作/实施这个项目threejs.org/editor 我看到只有直射光被 DracoEncoder 压缩，而不是 AmbientLight 通过示例和参数阴影投射/接收没有被压缩你也有解决方案吗？非常感谢您的帮助
不是所有的three.js 特性都可以用glTF 格式表示——例如，不能导出THREE.AmbientLight 和shadow-casting 属性。 three.js 论坛将是有关这些功能的问题的好来源：discourse.threejs.org