在服务器端加载和合并多个 GLTF [英] Multiple GLTF loading and Merging on server side

问题描述

我们正在尝试在服务器端合并多个 GLTF，并将合并的 gltf 作为最终结果导出到服务器上.

We are trying to merge multiple GLTFs on server side and export the merged gltf as final result on server.

我们已经证实有效但无效的事情:

Things we have trued that worked and that didn't:

1. 我们使用了三个 js GLTFLoader 解析方法来加载多个 gltf 文件，合并加载对象的父子对象，并使用 GLTFExporter 导出最终模型.

1. We have used three js GLTFLoader parse method to load multiple gltf files, merge the parent and children of the loaded objects and export the final model using GLTFExporter.

我们已经使用 jsdom 解决了与窗口、文档等相关的问题.

We have used jsdom to resolve the issues related to window, document etc.

上述要点适用于没有纹理的 gltfs

Above mentioned points work for gltfs without textures

在加载带有纹理的 GLTF 时，响应会卡住.

While Loading GLTF with textures the response gets stuck.

a) 我们尝试在服务器上托管文件并使用带有localhost:******"的 GLTFLoader 加载方法；作为加载程序路径.

a) We tried hosting the files on server and use the GLTFLoader load method with "localhost:******" as loader path.

b) TextureLoader 在内部调用 ImageLoader，而 onLoad 事件根本没有被触发.可能是 jsdom 没有调用这个.

b) Internally TextureLoader invoked ImageLoader where the onLoad event was not getting triggered at all . May be jsdom was not invoking this.

c) 为了解决这个问题，我们将 ImageLoader 更改为具有画布图像:

c) To solve this we changed ImageLoader to have canvas image :

        const { Image } = require("canvas");
        const image = new Image();
        image.onload = onImageLoad;
        image.onerror = onImageError;

d) 上面修改后加载方法解决了.

d) The load method got resolved after above change.

e) 下一步 - 导出 GLTF - 由于未找到 ImageData 错误，我们被卡住了.我们从画布中添加了 ImageData 并导出了 GLTF.

e) Next step - Exporting the GLTF - We got stuck due to ImageData not found error. We added ImageData from canvas and the GLTF was exported.

f) 导出的 GLTF 由于图像中的数据损坏而无法查看

f) The exported GLTF is not viewable die to corrupted data in images

 "images": [
    {
      "mimeType": "image/png",
      "uri": "data:,"
    }
  ],

如果有人纯粹在服务器端加载和合并带有纹理图像的 GLTfs，请帮忙！

If someone loaded and merged GLTfs with texture images purely server side, Please Help!

推荐答案

由于three.js 主要是用于Web 的3D 渲染库，并且依赖于各种Web 图像和WebGL API，因此我不确定使用THREE.GLTFLoader是在 Node.js 服务器上合并 glTF 文件的最有效方法.我建议改为:

As three.js is primarily a 3D rendering library for the web, and relies on various web image and WebGL APIs, I'm not sure using THREE.GLTFLoader is the most efficient way to merge glTF files on a Node.js server. I'd suggest this, instead:

import { Document, NodeIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';

const io = new NodeIO().registerExtensions(KHRONOS_EXTENSIONS);

const document = new Document();
const root = document.getRoot();

// Merge all files.
for (const path of filePaths) {
  document.merge(io.read(path));
}

// (Optional) Consolidate buffers.
const buffer = root.listBuffers()[0];
root.listAccessors().forEach((a) => a.setBuffer(buffer));
root.listBuffers().forEach((b, index) => index > 0 ? b.dispose() : null);

io.write('./output.glb', document);

值得注意的是，此过程将生成一个包含多个单独场景的 glTF 文件.如果你想把它们组合成一个单一的场景，以某种方式排列，你需要使用 场景 API 来做到这一点.如果文件不在磁盘上，则有 其他 NodeIO API 用于在内存中处理二进制或 JSON 文件.

It's worth noting that this process will result in a glTF file containing multiple separate scenes. If you want to combine them into a single scene, arranged in some way, you'd need to use the scene API to do that. If the files are not on disk, there are other NodeIO APIs for processing binary or JSON files in memory.

这篇关于在服务器端加载和合并多个 GLTF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！