服务器端的多个 GLTF 加载和合并

Question

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

我们已经证实有效而无效的事情：

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

2. 我们已经使用jsdom解决了window、document等相关的问题。

3. 上述几点适用于没有纹理的 gltfs

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

   a) 我们尝试将文件托管在服务器上，并使用 GLTFLoader 加载方法，将“localhost:******”作为加载器路径。

   b) 在根本没有触发 onLoad 事件的情况下，TextureLoader 在内部调用了 ImageLoader。可能是 jsdom 没有调用这个。

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

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

d) 上述修改后，加载方式得到解决。

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

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

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

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

Answer 1

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

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 文件。如果你想将它们组合成一个场景，以某种方式排列，你需要使用scene API 来做到这一点。如果文件不在磁盘上，则有other NodeIO APIs 用于处理内存中的二进制或 JSON 文件。