SceneSerializer

[Hagop]

Hi all

This question might sound naive but I am a newbie to Babylon

 

I created a simple scene which I want to export to a .babylon file

 

Where do I put the following code ? Do I need to run from a server? Where do I define the name of the exported file?

var serializedScene = BABYLON.SceneSerializer.Serialize(scene);
var strScene = JSON.stringify(serializedScene);

 

 

Here is my code

 

<script type="text/javascript">
     
      var canvas = document.querySelector("#renderCanvas");
      
      var engine = new BABYLON.Engine(canvas, true);
      // -------------------------------------------------------------
      // Here begins a function that we will 'call' just after it's built
      var createScene = function () {
         
         var scene = new BABYLON.Scene(engine);
         scene.collisionsEnabled = true;
         scene.clearColor = new BABYLON.Color3(0, 1, 0);
         
         var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 25, -10), scene);
         camera.applyGravity =true;
         camera.setTarget(BABYLON.Vector3.Zero());
         camera.attachControl(canvas, false);
         camera.checkCollisions = true;
                 
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            
         var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
         sphere.position.y = 1;
        
         var ground = BABYLON.Mesh.CreateGround("ground1", 26, 26, 2, scene);
         ground.gravity = new BABYLON.Vector3(0, -9.8, 0);
        
        
         return scene;
      }; // End of createScene function
      // -------------------------------------------------------------
      // Now, call the createScene function that you just finished creating
      var scene = createScene();
      
          
      engine.runRenderLoop(function () {
         scene.render();
      });
      // Watch for browser/canvas resize events
      window.addEventListener("resize", function () {
         engine.resize();
      });
   </script>

 

 

[iiceman]

Hi Hagop,

 

I made a playground so that everybody has an idea what you are talking about: http://www.babylonjs-playground.com/#1AGCWP (I changed a few things assuming that this is what you wanna do, check it out and let me know if you have a question about it )

 

If you look at your console, you can see the serialized scene. How you save that scene is up to you now. You could use an AJAX request to send it to your server and save it in a file or database. Or you could use the local storage of the browser to save the scene (but not sure if you cold load it from there or if it has to be a file on the server). Creating a .babylon file just with javascript and saving it is not possible as far as I know.

 

Hope that helps

[JohnK]

@iceman and @Hagon  JCPalmer showed me a way of creating and saving a .babylon file locally just with Javascript.  The following function will take a mesh, serialize it and then downloads the serialized file to your browsers download folder. It could be adapted for downloading a scene

function doDownload(filename, mesh) {    if(objectUrl) {        window.URL.revokeObjectURL(objectUrl);    }        var serializedMesh = BABYLON.SceneSerializer.SerializeMesh(mesh);            var strMesh = JSON.stringify(serializedMesh);        if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9){        filename += ".babylon";    }               var blob = new Blob ( [ strMesh ], { type : "octet/stream" } );           // turn blob into an object URL; saved as a member, so can be cleaned out later    objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);                    var link = window.document.createElement('a');    link.href = objectUrl;    link.download = filename;    var click = document.createEvent("MouseEvents");    click.initEvent("click", true, false);    link.dispatchEvent(click);          }

[Dad72]

Or one can also use ajax and php.

Ajax to send the scene serialized and PHP for encode json and create the file directly on the server or for download.

[iiceman]

@JohnK: nice, here a playground to show it works: http://www.babylonjs-playground.com/#1AGCWP#1 (it's changes for serializing the whole scene as you suggested)

[Hagop]

Many thanks guys for the help and the clues.

One more problem !

When I import the serialized scene using BABYLON.SceneLoader.Load the camera is not active (is not imported). Is this the way SceneLoader.Load works ?

[iiceman]

Hmm, I remember having problems with the ArcRotationCamera back when I played around with it a while ago but I thought that had been fixed. Maybe you can share your code or even better a live example so we can check it out?

 

Question @everybody: Is it currently possible to load a scene from a string? If so we could try to reproduce the problem in the playground. Nevermind, found it already

 

So here is a playground: http://www.babylonjs-playground.com/#1AGCWP#3

 

And the problem is not whether the camera is active or not, it's that the controls are not attached to that camera anymore. But as you can see in the playground that can be easily fix so I guess that's no big deal

 

If you still have questions just shoot

[Hagop]

iicmen

Many thanks.

[iiceman]

You are welcome Good luck and let us know if you need any more help...oh and don't forget to show us the final result of your work!

[Hagop]

I will surely do! We will build a 3D store with thousands of products.