Exporting To Babylon.js

Next (Lighting and Shading) Previous (Exporting To Three.js)

Clara.io exports Scene and Object data to Babylon.js.

Exporter

The Babylon.js exporter is already available and is located in:

File > Export All > Babylon.js

to export the whole scene and in:

File > Export Selected > Babylon.js

to export only the selected objects.

Note that for Camera, the rotateOrder is expected to be ZYX. Otherwise, this could lead to rotations not properly exported.

Operators

Clara.io offers Babylon.js operators for PolyMesh, Light, and Camera that allows to add Babylon.js specific controls.
These operators can be found in the category Exporter, which means that their effects can will only be used for exported .babylon files and don’t change the scene in Clara.io.

Babylon.js Operator in Operator combo-box

Note that for PolyMesh, if the skin operator is used, the Babylon.js operator should be used before the skin operator.

Loading your .babylon inside your page/app

First of all, you should create a simple html web page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Using babylon.js - How to load a scene</title>
  <script src="babylon.js"></script>
  <style>
    html, body {
      width:  100%;
      height: 100%;
      padding: 0;
      margin:  0;
      overflow: hidden;
    }
    #renderCanvas {
      width:  100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="renderCanvas"></canvas>
 </body>
</html>

This page is pretty simple because all you need is just a canvas and a reference to babylon.js.

Then you will have to use BABYLON.SceneLoader object to load your scene. To do so, just add this script block right after the canvas:

<script>
  if (BABYLON.Engine.isSupported()) {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
      // Wait for textures and shaders to be ready
      newScene.executeWhenReady(function () {
        // Attach camera to canvas inputs
        newScene.activeCamera.attachControl(canvas);

        // Once the scene is loaded, just register a render loop to render it
        engine.runRenderLoop(function() {
          newScene.render();
        });
      });
    }, function (progress) {
        // To do: give progress feedback to user
    });
  }
</script>

the Load function takes the following parameters:

scene folder (can be empty to use the same folder as your page)
scene file name
a reference to the engine
a callback to give you the loaded scene (in this case, the callback to attach the camera to the canvas and to launch my render loop)
a callback for progress report

Once the scene is loaded, just wait for the textures and shaders to be ready, connect the camera to the canvas and let’s go!

Fairly simple, isn’t it?

Please note that the textures and the .babylon file must be side by side

Another function is also available to interact with .babylon files: BABYLON.SceneLoader.importMesh:

BABYLON.SceneLoader.ImportMesh("spaceship", "Scenes/SpaceDek/", "SpaceDek.babylon", scene,
                               function(newMeshes, particleSystems, skeletons) {
});

This function is intended to import meshes (with their materials and particle systems) from a scene to another. It takes the following parameters:

object name (if you omit this parameter, all the objects are imported)
scene folder (can be empty to use the same folder as your page)
scene file name
a reference to the target scene
a callback to give you the list of imported meshes, particle systems, and skeletons

Creating a scene for Babylon.js

Let create a sample scene with:

A camera
A spot light
A red-ish point light
A cylinder
A plane for the ground
A checkerboard material applied on the cylinder

clara scene

The cylinder and the plane have a Babylon.js operator with properties Cast Shadow and Receive Shadow set to true. The spot light has a Babylon.js operator with a shadow map type set to Standard with a size of 1024.

Once exported and loaded with the sample code above, the Babylon.js scene looks like this:

babylon scene

Using the Babylon.js Sandbox

There is a great and easy way to test your scene: the Babylon.js Sandbox. With a single drag’n’drop into a web page, you will be able to test your scene without any more setup.

Adding MIME types to your web server

You will need to authorize .babylon MIME type on your web server (and furthermore you will also need to authorize .babylonmeshdata MIME type if you want to use incremental loading)

Next (Lighting and Shading) Previous (Exporting To Three.js)