javascript - 将 glb 转换为 draco glb 前端
问题描述
有没有办法仅在前端(客户端)将glb文件编码和转换为draco glb?
解决方案
是的,这可以用glTF-Transform来实现。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
推荐阅读
- docker - 指定共享卷的数据来源
- c - 给定 N 个硬币,每个硬币最多可以使用 T 次。是否可以使用最少的 N 个硬币来产生 W 值?
- python - 导入所有 csv 并将它们写入数据框
- javascript - 使用 Javascript 在 Google Drive 中创建树形目录结构
- ios - 创建包含来自多个视图的数据的表视图单元格
- amazon-web-services - 如何在同一个 API 中使用 ECS 和 Lambda 微服务?
- python - 如何将带有股票代码的列添加到 DataFrame
- javascript - 使用useReducer时如何在useCallback中获取当前状态?
- api - 当我发布带有正文数据的标头的 URL 时,它在 J METER -HTTP API 请求中工作正常,我收到以下错误
- python - 从字典列表中删除与特定键共享相同值的字典,优先选择最近的