Xeolabs SceneJS → V0.7.6

Extend the data flow capabilities with a SceneJS.WithConfigs node which pushes values down into the setter methods of nodes in its subgraph.

The SceneJS.WithData and dynamic node config functions are to be used when we don't care about the structure of the subgraphs we are configuring. With that mechanism we are leaving it to the subgraph to pull data off the scope and decide how best to configure itself.

The SceneJS.WithConfig node is to be used when we are aware of the structure of the subgraph and want to explicitly set the state of particular nodes on it.

The SceneJS.WithConfigs node is configured with a hierarchical map of values for the setters of nodes in its subgraph. The map associates values with the sids (sub-identiers) of the subnodes so that the values are set on the nodes when they are rendered.

Examples

Basic Example

The example below sets the angle properties of SceneJS.Rotate nodes that have "pitch" and "yaw" SIDs. Note how the SID references in the SceneJS.WithConfigs are prefixed with a "#" to differentiate them from other property keys on each map:

SceneJS.withConfigs({
        "#pitch": {
            angle: 40,

            "#yaw" : {
                angle: 200
             }
         }
   },
   SceneJS.rotate({
               sid: "pitch",
               angle: 0,
               x : 1.0
           },
           SceneJS.rotate({
                   sid: "yaw",
                   angle: 0,
                   y : 1.0
              },
              SceneJS.objects.teapot())))

Practical Example

The real purpose for this node is to push data across boundaries within scene graphs, such as instance references and into the subgraphs created by nodes like SceneJS.Load and SceneJS.LoadCollada etc. This example uses SceneJS.WithConfigs in conjunction with SceneJS.Symbol and SceneJS.Instance to configure three instances of a teapot, each with different configurations for the instance's transform nodes:

/* Define a teapot symbol, with position and orientation transforms
*/
SceneJS.symbol({ name: "teapot" },
        SceneJS.translate({ sid: "position" },
                SceneJS.rotate({ sid: "pitch", x: 1 },
                        SceneJS.rotate({ sid: "yaw", y: 1 },
                                SceneJS.scale({x:1.0,y:1.0,z:1.0},
                                        SceneJS.objects.teapot()))))),


       /* First instance with position, pitch and yaw configurations
       */
        SceneJS.withConfigs({
            "#position": {
                x: -10,
                "#pitch": {
                    angle: -20,
                    "#yaw" : {
                        angle: 180
                    }
                }
            }
        }, SceneJS.instance({ name: "teapot" })),


       /* Second instance with just a yaw configuration
       */
        SceneJS.withConfigs({
            "#yaw" : {
                angle: -40
            }
        }, SceneJS.instance({ name: "teapot" })),


       /* Third instance with just position and yaw configurations
        */
        SceneJS.withConfigs({
            "#position": {
                x: 10,
                "#yaw" : {
                    angle: -40
                }
            }
        }, SceneJS.instance({ name: "teapot" }))