使用 three.js 保存和加载文件答案

【问题标题】：Save and load files with three.js使用 three.js 保存和加载文件
【发布时间】：2017-09-04 10:12:03
【问题描述】：

有没有办法用three.js 保存和加载字符串化的对象？

我发现了这个：https://github.com/josdirksen/learning-threejs/blob/master/chapter-08/03-load-save-json-object.html

但他们使用localstorage 来保存和加载，这在会话或不同计算机之间不起作用。

有没有办法像加载模型一样加载文件？这应该类似于为游戏加载数据文件。

我使用 http-server 在本地使用 Autodesk 查看器运行 webgl 客户端。

【问题讨论】：

您可以使用 File API 保存/读取文件，但每次保存时都会提示用户保存的位置。要保存在各种本地存储之外，您需要一台服务器。 See this article 了解如何开始编写这样的服务器
但是已经有一个服务于模型文件的服务器，为什么我不能使用它？ @gman
也许你可以，但你需要添加用于加载和保存的函数和路由。保存文件通常不是标准的服务器功能，它是您为满足项目需求而添加的功能

标签： three.js autodesk-forge autodesk-viewer

【解决方案1】：

如果对象可以写入本地存储，它也可以作为文件导出。您可以将它们发送到服务器并将它们存储在那里（也许像 firebase 这样的东西在这里会很有用），或者您可以直接从浏览器启动“下载”。这在Create a file in memory for user to download, not through server 中有解释。

要加载文件，您可以使用 file-api，如下所示：How to open a local disk file with Javascript?。

您只需要相应地替换示例中的 localstorage-parts。

【讨论】：

为什么我不能使用提供模型文件的同一台服务器？
当然，您也可以这样做。但是您说您使用的是 http-server，afaik 不支持 PUT 或 POST 请求在服务器上存储文件。这就是为什么我提供了一些使用纯静态服务器执行此操作的选项。

【解决方案2】：

除了Martin's answer，Autodesk 查看器使用由Model Derivative API 翻译和托管的文件。可以在同一个场景中显示多个文件。查看器是只读的。有一个 getState 和 loadState 函数来获取代表当前缩放/分解/视图信息的对象，并且可以序列化并存储在某处。

some samples 展示了如何在模型上移动几何图形，例如，移动墙壁的几何图形（从建筑模型中）。但这不是持久的，这意味着您需要实现 JavaScript（客户端）+ 后端基础架构来保存和恢复这些转换。

【讨论】：