Adding and Removing Scene Nodes
We got started with SceneJS in the quick start tutorial, now I’ll show you how add and remove nodes to and from your scene graph.
A scene graph is a data structure that arranges the logical and spatial representation of a graphical scene as a collection of nodes in a graph, typically a tree. Scene graphs can provide a convenient abstraction on top of low-level graphics APIs (such as WebGL) that encapsulates optimisations and API best practices, leaving the developer free to concentrate on scene content.
A key feature of most scene graphs is state inheritance in which child nodes inherit the states set up by parents (e.g. coordinate spaces, appearance attributes etc).
For SceneJS, a benefit of scene graphs is modularity, where JSON subtrees can be complete reusable components, and brevity, where state may be reused by wrapping it around many child nodes.
Creating a scene graph
The snippet below is an example of a 3D scene created with SceneJS. The scene graph is a directed acyclic graph expressed in JSON, in this case defining a scene containing a blue teapot and two boxes sharing the same textured appearance. Geometry nodes are normally at the leaves, where they inherit the state defined by higher nodes, in this case the material and rotation transform.
SceneJS parses that description to create the 3D scene shown below:
As shown back in the quick start tutorial, we can animate one of those
nodes like this:
See how we get the node with an asynchronous callback? That’s because SceneJS may actually be creating bits of your scene asynchronously, as it waits for plugins to load. Always get your node objects this way.
Adding nodes to the scene is as simple as:
Remove nodes like this: