How can I save the scene to firebase and load it according?

Questions
,
1

I’m trying save to the scene (e.g. the position and the animation of an object ) to database like firebase. Therefore when next visiting, users can see the scene they saved and can share it to others.

Below is some discussion about saving the scene to localstorage or export it to json file.

But I need the scene to be loaded online so other users can see it as well. Is that possible to save to the parameters to url or firebase without exporting gltf?

2

  1. You can save your scene to a local storage or a database the same way, since glTF is JSON, and JSON is just plain text. You can simply use JSON.stringify and JSON.parse to write and read your scenes. Or is your question specifically about Firebase Database API, on how to write and read data from the database?

  2. You cannot export entire scene to a URL parameter. Url has a limit of 2,048 characters (since they are just GET requests) and that’s usually not enough to store an entire JSON structure.

1 Like
3

Thanks for answering :slightly_smiling_face:

  1. Yes, I specially want to store and read scene data from Firebase Database. Below is the scene that is loaded at first, but user might interact with it and create new scene. I want store the scale, position, and animation of the scene to firebase. Can’t find any doc to do that.

----------- ------------ ------------ ------------- my code ------------ ------------ ------------ ------------

 function ( gltf )  {
        // create animation             
        mixer = new THREE.AnimationMixer( gltf.scene );
        clips = gltf.animations;
        clip = THREE.AnimationClip.findByName( clips, 'Chat2' );
        action = mixer.clipAction( clip );
        action.play();
        
        // scale
        gltf.scene.scale.x = 2.25;
        gltf.scene.scale.y = 2.25;
        gltf.scene.scale.z = 2.25;

        // position
        gltf.scene.position.x = 75;
        gltf.scene.position.y = -250;
        gltf.scene.position.z = 0;

        scene.add( gltf.scene );
        update();    
    }
  1. Noted.
4

@walo on every three js object there is one toJSON method is available to convert the three js obj into the json form and than if you want to convert the json to three js use the obj loader that will help you

1 Like
5

Using toJSON() to serialize and ObjectLoader to deserialize (load) will provide the most complete support for three.js features. The JSON format is specifically for three.js, so it supports nearly everything three.js does.

The glTF format is an external standard, so it doesn’t necessarily have the same features 1:1 that three.js does. I expect it will load faster than three.js JSON, especially if you use the binary (.glb) option. But to get the advantage of that you probably want to store the data in binary form.

Also — if you don’t need to store all the mesh vertices, all of this is probably overkill. To store position/rotation/scale, you should just assign each object a unique ID and store those values yourself.

2 Likes