javascript - 将 three.js 场景保存到服务器的有效方法是什么？

Question

我正在构建一个使用 three.js 渲染 3D 模型的网络应用程序。我已经实现了通过选择基本模型(任何格式的 3D 模型，例如 .obj+.mtl、.3ds 等...)来创建项目的功能。现在我必须实现一个保存功能，它将事件的 three.js 场景作为 JSON 文件保存到服务器。问题是，当我将场景导出为文件时，尺寸变得非常大。

例如，当我将 24MB obj+mtl 模型(包括纹理大小)转换为文本文件时(使用 JSON.stringify(scene.toJSON()) )，文件大小变为208MB! 我认为每次用户单击保存按钮时向服务器发送208MB 数据不是一个好主意。所以我尝试实现一个函数，该函数将使用两个 json 对象之间的差异创建一个补丁文件。如果我们在服务器端有与json相同的场景数据，我们只需要发送补丁文件，我们就可以应用这个补丁来同步两个文件。这里文件大小也是一个大问题，因为我们必须在用户单击保存时第一次将整个文件发送到服务器。

作为一种不同的方法，我导出了上述模型没有mtl文件，现在文件大小只有31MB。有什么方法可以导出没有纹理的场景吗？如果可能的话，我如何从导出的文本文件中重新创建相同的场景并通过指定纹理路径来加载纹理？还有哪种方法是将 three.js 场景保存到服务器的正确方法？我对这类实现没有太多经验，所以如果我完全错了，请纠正我。

Answer 1

一些建议，按个人喜好排序:

1. 如果用户没有在您的应用程序中编辑纹理，请考虑在向服务器发送数据时省略纹理(或用 ID stub )。这将大大减少数据大小。据推测，您可以在导出后和渲染前编辑 JSON，以用实际纹理替换纹理 ID。

2. 使用 GLTFExporter ( example ) 导出您的场景。 glTF 使用 JSON 和二进制数据的组合，并且可能比 OBJ 或 three.js JSON 传输更有效。但是请注意，glTF 并不支持 three.js 的所有功能。

3. 使用 OBJExporter ( example ) 导出场景。请注意，OBJ 支持的功能少于 three.js JSON 或 glTF。

我认为选择最终取决于允许用户在您的编辑器中进行哪些类型的更改。如果您需要支持所有可能的 three.js 功能，那么 three.js JSON 是唯一真正的选择。