three.js - 在服务器端加载和合并多个 GLTF

Question

我们正在尝试在服务器端合并多个 GLTF，并将合并的 gltf 作为最终结果导出到服务器上。
我们已经证实有效但无效的事情:

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

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

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

使用纹理加载 GLTF 时，响应会卡住。
a) 我们尝试在服务器上托管文件并使用 GLTFLoader 加载方法，以“localhost:******”作为加载器路径。
b) TextureLoader 在内部调用 ImageLoader，而 onLoad 事件根本没有被触发。可能是 jsdom 没有调用这个。
c) 为了解决这个问题，我们将 ImageLoader 更改为具有 Canvas 图像:

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

d) 加载方法经过上述更改后得到解决。
e) 下一步 - 导出 GLTF - 由于未找到 ImageData 错误，我们被卡住了。我们从 Canvas 中添加了 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 文件。