Save and load files with three.js

Question

Is there a way to save and load stringified objects with three.js?

I found this: https://github.com/josdirksen/learning-threejs/blob/master/chapter-08/03-load-save-json-object.html

but they use localstorage to save and load, which won't work between sessions or different computers.

Is there a way to load files just like the model is loaded? This should be like loading data files for a game.

I run the webgl client with Autodesk viewer locally with http-server.

You can save/read from files using the File API but the user will be prompted always where to save for each save. To save outside of various local storage you need a server. [See this article](https://games.greggman.com/game/saving-and-loading-files-in-a-web-page/) for how to get started writing such a server — gman, Apr 10 '17 at 06:29
But there's already a server that serves the model files, why I can't use that? @gman — shinzou, Apr 10 '17 at 06:32
Maybe you can but you'll need to add functions and routes for loading and saving. Saving files is not generally a standard server feature, it's a feature you add on to meet your project's needs — gman, Apr 10 '17 at 06:34

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

If the Object can be written to localstorage it can just as well be exported as a file. You can send them to a server and store them there (maybe something like firebase would be useful here), or you can intiate a "download" directly from the browser. This is explained in Create a file in memory for user to download, not through server.

For loading a file, you can use the file-api, which is shown here: How to open a local disk file with Javascript?.

You just need to replace the localstorage-parts in your example accordingly.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 09 '17 at 20:40

Martin Schuhfuß

6,814
1
36
44

Why I can't use the same server that serves the model files? – shinzou Apr 10 '17 at 06:33
Sure, you can do that as well. But you stated you are using http-server, which afaik doesn't support PUT or POST-requests to store files on the server. That's why I gave some options for doing this with a pure static server. – Martin Schuhfuß Apr 11 '17 at 09:19

score 1 · Answer 2 · edited May 23 '17 at 12:32

Adding to Martin's answer, the Autodesk Viewer uses files translated and hosted by Model Derivative API. It's possible to show multiple files into the same scene. The Viewer is read-only. There is a getState and loadState functions to get the objects that represents the current zoom/explode/view information, and that can be serialized and stored somewhere.

There are some samples showing how to move a geometry on the model, for instance, move the geometry of a wall (from a building model). But that is not persistent, meaning you need to implement a JavaScript (client) + back-end infrastructure to save and restore those transformations.

Save and load files with three.js

2 Answers2