@xeographics bio photo

@xeographics

Lindsay Kay
3D graphics programmer

Twitter Google+ LinkedIn Github

SceneJS Quick Start


Contents

SceneJS is an extensible WebGL-based engine for doing high-performance 3D visualisation in the browser without using plugins.

Let’s start easy, with an example that shows the essential concepts of this engine.

First example

We’re going to render this spinning Utah teapot:

SceneJS First Example

Run this example.

Download and unzip SceneJS and plugins

Download and unzip the SceneJS ZIP archive. Then we’ll have these files:

.
├── scenejs.js
├── plugins
└── firstExample.html

We have the SceneJS library, the SceneJS plugins bundle, and an example HTML page which renders our teapot.

Now let’s look at the essential bits of that firstExample.html page.

Within the <head> tag of the page, we link to the SceneJS library:

<script src="./scenejs.js"></script>

Point SceneJS to the plugins

Within the <script> tag, the first thing we do is configure SceneJS to find those plugins:

SceneJS.setConfigs({
    pluginPath: "./plugins"
});

Create a scene

Then we go wild and create our spinning blue teapot:

var scene = SceneJS.createScene({
    nodes:[
        {
            type:"material",
            color: { r: 0.3, g: 0.3, b: 1.0 },

            nodes:[
                {
                    type: "rotate",
                    id: "myRotate",
                    y: 1.0, angle: 0,

                    nodes: [

                        // Teapot primitive, implemented by plugin file
                        // ./plugins/node/geometry/teapot.js
                        {
                            type:"geometry/teapot",
                            id: "myTeapot"
                        }
                    ]
                }
            ]
        }
    ]
});

Spin the teapot

Finally, we start the teapot spinning:

scene.getNode("myRotate", function(myRotate) {

    var angle = 0;

    scene.on("tick",
        function() {
            myRotate.setAngle(angle += 0.5);
        });
});

Replace the teapot

Scenes can be built incrementally. Let’s add another teapot

scene.getNode("myTeapot", function(myTeapot) {

    myTeapot.destroy();

    scene.getNode("myRotate", function(myRotate) {
        myRotate.addNode({
            type: "geometry/torus"
        });
    })
});

What’s next?




comments powered by Disqus