Which is the efficient way to save three.js scene to a server?

Question

I am building a web application that uses three.js to render 3D models. I have implemented a feature to create a project by choosing a base model ( 3D model of any format such as .obj+.mtl, .3ds, etc... ). Now I have to implement a save feature which will save the active three.js scene to the server as a JSON file. The problem is that, when I export the scene as a file, size becomes very huge.

For example, when I convert a 24MB obj+mtl model(including size of textures) to a text file ( using JSON.stringify(scene.toJSON()) ), the file size becomes 208MB! I don't think it is a good idea to send 208MB data to the server each time when a user clicks on the save button. So I have tried to implement a function which will create a patch file using the difference between two json objects. If we have the same scene data as json in the server side, we have to send only the patch file and we can apply this patch to sync the two files. Here also the file size is a big problem because we have to send the entire file to the server for the first time when the user clicks on save.

As a different approach I have exported the above mentioned model without the mtl file, now the file size is only 31MB . Is there any methods to export the scene without textures? If it is possible, how can I recreate the same scene from the exported text file and by specifying the texture path to load textures? Also which method is the right one to save a three.js scene on to the server? I don't have much experience on these kind of implementations, so please correct me if I am completely wrong.

Answer 1

A few suggestions, in order of my personal preference:

1. Consider omitting textures (or stubbing them with IDs) when sending data to the server if users aren't editing them in your application. This will reduce the data size a lot. Presumably you can edit the JSON after export, and before rendering, to replace the texture IDs with actual textures.

2. Use GLTFExporter ( example ) to export your scene. glTF uses a combination of JSON and binary data, and will probably be more efficient than OBJ or three.js JSON to transmit. However, note that glTF does not support all features of three.js.

3. Use OBJExporter ( example ) to export the scene. Note that OBJ supports fewer features than three.js JSON or glTF.

I think the choice ultimately depends on what sorts of changes the user is allowed to make in your editor. If you need to support every possible three.js feature, then three.js JSON is the only real choice.