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

【问题标题】：Which is the efficient way to save three.js scene to a server?将three.js场景保存到服务器的有效方法是什么？
【发布时间】：2017-09-19 01:33:45
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript three.js client-server

【解决方案1】：

一些建议，按个人喜好排列：

如果用户没有在您的应用程序中编辑纹理，则在向服务器发送数据时考虑省略纹理（或使用 ID 对纹理进行存根）。这将大大减少数据大小。大概您可以在导出之后和渲染之前编辑 JSON，以将纹理 ID 替换为实际纹理。
使用 GLTFExporter (example) 导出场景。 glTF 使用 JSON 和二进制数据的组合，并且可能会比 OBJ 或 three.js JSON 传输更有效。但是请注意，glTF 并不支持 three.js 的所有功能。
使用 OBJExporter (example) 导出场景。请注意，OBJ 支持的功能少于 three.js JSON 或 glTF。

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

【讨论】：

感谢您的回复。我也在考虑第一个选择。但是如何在没有纹理的情况下导出场景？有什么方法吗？
没有辅助方法，但它只是 JSON。您可以编辑它，例如delete json.images;，或检查它以找出使它如此之大的原因。可能想先尝试一个较小的文件。
也许使用JSZip之类的东西来压缩它？只是一个想法，我从未尝试过
@DonMcCurdy 我认为当我们将场景转换为 JSON 格式时，图像会转换为 base64，我希望这就是文件巨大的原因。我曾尝试导出一个单一纹理为 334 KB 的立方体模型，导出的文件大小为 4.9 MB。无论如何，我会尝试您建议的方法（从 JSON 数据中删除图像...）。感谢您的帮助:)
@DonMcCurdy 感谢您的宝贵建议。问题在于 Object3D.toJSON() 方法，它将图像转换为 base64 格式。现在我修改了 Object3D.toJSON() 使其不会将图像转换为 base64。现在导出的场景文件更小了（我们可以通过压缩它来使它更小），我可以将它发送到服务器。