A SceneJSModel is a Model that imports content from the JSON-based SceneJS scene definition format.

Overview

• A SceneJSModel is a container of Components that loads itself from a SceneJS scene definition, given as either a JSON file or a JavaScript object (POJO).
• It begins loading as soon as you either set its src property to the location of a valid SceneJS JSON file, or set its data property to a valid POJO.
• You can set these properties to new values at any time, which causes the SceneJSModel to clear itself and load fresh components.
• Can be configured to do a best-effort conversion of SceneJS Phong materials into xeogl's PBR PBRMetalness or SpecularMaterials.

It inherits these capabilities from its Model base class:

• Allows you to access and manipulate the components within it.
• Can be transformed within World-space by attaching it to a Transform.
• Provides its World-space boundary as a Boundary3D.

SceneJS Support

SceneJSModel was developed to import the Tron Tank model. As such, it only imports a limited subset of the SceneJS scene definition API. Use with caution and be prepared to fix and contribute missing functionality!

SceneJS nodes supported so far:

• "node"
• "rotate"
• "translate"
• "scale"
• "material"
• "texture"
• "fresnel"
• "flags"
• "geometry"
• "layer"
• "stage"

Unsupported API features include:

• Lights
• Cameras
• Shared node cores
• SceneJS plugins

Examples

• Importing POJO defining geometry with diffuse, specular and normal maps
• Importing POJO defining transparent geometry
• Importing JSON file defining geometry with diffuse, specular and normal maps
• Importing JSON file defining the SceneJS Tron Tank

Usage

Loading a POJO scene definition

The simplest way to import SceneJS content is by setting a POJO on the SceneJSModel's data property:

var pojoModel = new xeogl.SceneJSModel({
       id: "myModel",

       // Our POJO scene definition
       data: {
           type: "node",
           nodes: [
               {
                   type: "rotate",
                   id: "myRotate",
                   nodes: [
                       {
                           type: "geometry",
                           id: "boxEntity",
                           primitive: "triangles",
                           positions: [
                               2, 2, 2, -2, 2, 2, -2, -2, 2, 2, -2, 2, 2, 2, 2, 2, -2,
                               2, 2, -2, -2, 2, 2, -2, 2, 2, 2, 2, 2, -2, -2, 2, -2,
                               -2, 2, 2, -2, 2, 2, -2, 2, -2, -2, -2, -2, -2, -2, 2,
                               -2, -2, -2, 2, -2, -2, 2, -2, 2, -2, -2, 2, 2, -2, -2,
                               -2, -2, -2, -2, 2, -2, 2, 2, -2
                           ],
                           normals: [
                               0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1,
                               0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, -1, 0,
                               0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0,
                              -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
                           ],
                           uv: [
                               5, 5, 0, 5, 0, 0, 5, 0, 0, 5, 0, 0, 5, 0, 5, 5,
                               5, 0, 5, 5, 0, 5, 0, 0, 5, 5, 0, 5, 0, 0, 5, 0,
                               0, 0, 5, 0, 5, 5, 0, 5, 0, 0, 5, 0, 5, 5, 0, 5
                           ],
                           indices: [
                               0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11,
                               12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21,
                               22, 20, 22, 23
                           ]
                       }
                   ]
               }
           ]
       }
    });

// Set camera position
var camera = pojoModel.scene.camera;
camera.eye = [0, 0, -25];
camera.look = [0, 0, 0];
camera.up = [0, 1, 0];

Finding components

Our SceneJSModel has now created various xeogl components within itself, which we can find by their IDs. In this particular example, our POJO has a SceneJS "rotate" node with ID "myRotate". Our SceneJSModel parsed that into a Rotate component with ID "myModel.myRotate".

To see what components our SceneJSModel created, we can drop this expression into the browser's JavaScript debug console (we're using Chrome here):

pojoModel.types;

The result is the value of the SceneJSModel's types map, which contains its xeogl components, mapped to their types:

Here we've expanded the Rotate components, and we can see our Rotate. Note that its ID is prefixed with the ID of the SceneJSModel.

Let's get that Rotate from our SceneJSModel's components map and set it spinning:

var rotate = pojoModel.components["myModel.myRotate"];

pojoModel.scene.on("tick", function() {
   rotate.angle += 0.2;
});

Loading a JSON scene definition

As shown in the example below, we can also import a SceneJS scene definition from a JSON file (eg. tronTank.json). Note that we need to wait for the SceneJSModel's loaded event before we can access its components. In this example we're also showing how a SceneJSModel can be attached to a modeling Transform hierarchy to transform it within World space (see Model).

// Import SceneJS JSON model
var tankModel = new xeogl.SceneJSModel({
       id: "tankModel",

       // Path to our JSON scene definition file
       src: "models/scenejs/tronTank.json",

       // We can also bolt on a hierarchy of modeling transforms,
       // to transform the entire SceneJSModel in World space
       transform: new xeogl.Rotate({
           xyz: [0, 1, 0],
           angle: 0,
           parent: new xeogl.Translate({
               xyz: [0, 0, 0]
           })
       })
    });

// Once our SceneJSModel has loaded, we can access its components
tankModel.on("loaded", function() {

       tankModel.components["tankModel.gunDir"].angle = gunDir;

       // Set camera position
       var camera = tankModel.scene.camera;
       camera.eye = [0, 0, -70];
       camera.look = [0, 0, 0];
       camera.up = [0, 1, 0];
   });

Converting materials to PBR

var pbrSpecularTankModel = new xeogl.SceneJSModel({
   src: "models/scenejs/tronTank.json",
   materialWorkflow: "SpecularMaterial"
});

var pbrMetalnessTankModel = new xeogl.SceneJSModel({
   src: "models/scenejs/tronTank.json",
   materialWorkflow: "MetallicMaterial"
});