Easy 3D scene definition
for WebGL
SceneJS is a JavaScript framework by Lindsay Kay that provides a terse yet expressive API through which you can easily create interactive 3D scenes on the WebGL canvas element.
General Syntax
Below is a simple example that renders the airplane shown to the right.
The airplane model is a SceneJS module that has been parsed from a COLLADA file, and we begin by importing it, which happens quickly because it's raw, compressed JavaScript.
Then to render the airplane, SceneJS will traverse the scene in depth-first order. Each node is a function that will set some scene state on entry, then un-set it again before exit. In this graph, the scene node binds to a WebGL Canvas element, a lookAt defines the viewoint, a camera defines the projection, lights defines a light source, rotate nodes orients the modeling coordinate space, then a useModule renders our airplane module.
Note how node parameters are generally a configuration object followed by zero or more children:
node({ foo: "bar" }, node( .. ), node( .. ) ... )
For brevity, parameters are given only to override defaults.
Take a closer look at those rotate nodes. See how they can optionally take a function which feeds them their parameters? You can do that for any node to dynamically evaluate parameters for them at traversal-time. The functions take an immutable data object, which is SceneJS's mechanism for passing variables down into scene graphs.
Using the yaw and pitch properties on that data object, our functions create configurations that specify rotations about the X and Y axis. See also how we inject those angles when we render the scene.
To really get an idea of what SceneJS can do, take a look at the Live Examples, which grow a little with every release.