Jump to content

SceneSerializer


Hagop
 Share

Recommended Posts

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>

 

 

Link to comment
Share on other sites

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 :P )

 

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 :)

Link to comment
Share on other sites

@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);          }
Link to comment
Share on other sites

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 :P

 

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 :P

 

If you still have questions just shoot ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...