99% of the time a scene graph will be animated, and therefore
rendered in a loop.
We need to encapsulate the render loop within SceneJS.Scene
start and stop methods so that we can later introduce optimisations
like FPS-on-demand. We'll keep the SceneJS.Scene#render method for
single-frame renders.
Starts the rendering loop on the scene. You can specify an
idleFunc that will be called within each iteration before
the scene graph is traversed for the next frame. You can also
specify the desired number of frames per second to
render, which SceneJS will attempt to achieve.
Usage Example: Basic Loop
Here we are rendering a scene in a loop, at each frame feeding
some data into it
(see main {@link SceneJS.Scene} comment for more info on that),
then stopping the loop after ten frames are rendered:
var n = 0;
myScene.start({
idleFunc: function(scene) {
scene.setData({ someData: 5, moreData: 10 };
n++;
if (n == 100) {
scene.stop();
}
},
fps: 20
});
Usage Example: Picking
The snippet below shows how to do picking via the idle function,
where we
retain the mouse click event in some variables which are collected
when the idleFunc is next called. The idleFunc
then puts the scene into picking mode for the next traversal. Then
any {@link SceneJS.Geometry} intersecting the
canvas-space coordinates during that traversal will fire a "picked"
event to be observed by "picked" listeners at
higher nodes (see examples, wiki etc. for the finer details of
picking). After the traversal, the scene will be back
"rendering" mode again.
var clicked = false;
var clickX, clickY;
canvas.addEventListener('mousedown',
function (event) {
clicked = true;
clickX = event.clientX;
clickY = event.clientY;
}, false);
myScene.start({
idleFunc: function(scene) {
if (clicked) {
scene.pick(clickX, clickY);
clicked = false;
}
}
});