Here’s a simple example showing the structure of the SceneJS scenegraph
SceneJS.createScene({ id: "theScene", // Scene ID - mandatory canvasId: "theCanvas", // Bind scene to canvas nodes: [ /* Viewing transform */ { type: "lookAt", eye : { x: 0.0, y: 10.0, z: 15 }, look : { y:1.0 }, up : { y: 1.0 }, nodes: [ /* Projection */ { type: "camera", optics: { type: "perspective", fovy : 25.0, aspect : 1.47, near : 0.10, far : 300.0 }, nodes: [ /* Point lights */ { type: "light", mode: "dir", color: { r: 1.0, g: 1.0, b: 1.0 }, diffuse: true, specular: true, dir: { x: 1.0, y: -0.5, z: -1.0 } }, { type: "light", mode: "dir", color: { r: 1.0, g: 1.0, b: 0.8 }, diffuse: true, specular: false, dir: { x: 0.0, y: -0.5, z: -1.0 } }, /* Modelling transforms - note the IDs, "pitch" and "yaw" */ { type: "rotate", id: "pitch", angle: 0.0, x : 1.0, nodes: [ { type: "rotate", id: "yaw", angle: 0.0, y : 1.0, nodes: [ /* Ambient, diffuse and specular surface properties */ { type: "material", emit: 0, baseColor: { r: 0.5, g: 0.5, b: 0.6 }, specularColor: { r: 0.9, g: 0.9, b: 0.9 }, specular: 1.0, shine: 70.0, nodes: [ /* Teapot geometry - a built-in teapot type */ { type : "teapot" } ] } ] } ] } ] } ] } ] }); /* Get handles to some nodes */ var scene = SceneJS.scene("theScene"); var yawNode = scene.findNode("yaw"); var pitchNode = scene.findNode("pitch"); /* As mouse drags, we'll update the rotate nodes */ var lastX; var lastY; var dragging = false; var newInput = false; var yaw = 0; var pitch = 0; var canvas = document.getElementById("theCanvas"); function mouseDown(event) { lastX = event.clientX; lastY = event.clientY; dragging = true; } function mouseUp() { dragging = false; } function mouseMove(event) { if (dragging) { yaw += (event.clientX - lastX) * 0.5; pitch += (event.clientY - lastY) * 0.5; lastX = event.clientX; lastY = event.clientY; newInput = true; } } canvas.addEventListener('mousedown', mouseDown, true); canvas.addEventListener('mousemove', mouseMove, true); canvas.addEventListener('mouseup', mouseUp, true); /* Start the scene rendering */ scene.start({ idleFunc: function() { if (newInput) { yawNode.set("angle", yaw); pitchNode.set("angle", pitch); newInput = false; } } });