How to Distribute Random cubes in a Scene using SceneJS?

Question

<head>
    <title> SceneJS Test</title>
    <script type="text/javascript" src="resources/scenejs.js"></script>
</head>

I want to distribute cubes randomly on the canvas scene using SceneJS. Since the library has major learning curve, Myself checked with few examples and started coding. I did some code and couldn't convince myself where the errors are:

<body onload = "main()" bgcolor="white">
        <canvas id="theCanvas" width="720" height="405">
        </canvas>
         <script type="text/javascript">

       main = function({

         N = 10;
         var canvas = document.getElementById("theCanvas");
         var sceneName = "theScene";

         SceneJS.createScene({
          id: sceneName,
          canvasId: canvas,
          nodes: [{
            type:"library",
              id:"mylib",
              nodes:[]
            },
            // Viewing transform specifies eye position, looking at the origin by default
            {
              id:"lookat",
              type: "lookAt",
              eye : { x: 0.0, y: 1.0, z: 80.0 },
              up : { z: 1.0 },
              look:{x:0,y:0,z:0},
              nodes: [
                  /* Camera describes the projection*/
                  {
                type: "camera",
                optics: {
                type: "perspective",
                fovy : 45.0,
                aspect : 720/405,
                near : 0.10,
                far : 10000.0
                  },
                  nodes: [
                   {
                    type: "rotate",
                    id: "pitch",
                    angle: 0.0,
                    x : 1.0,    
                    nodes: [
                        {
                          type: "rotate",
                          id: "yaw",
                          angle: 0.0,
                          y : 1.0,
                         }
                        ]
                      }
                      ]
                  }
                  ]
            }
            ]
        });
         var scale = 100;
         var scene = SceneJS.scene(sceneName);
         for(var i=0; i<N; i++)
         {
           scene.add("node",{
          type:"translate",
            x:(Math.random()-0.5)* scale,
            y:(Math.random()-0.5)* scale,
            z:(Math.random()-0.5)* scale,
            nodes:[{
              type: "cube",
            id: "cube"+i
            }]
            });
         }
       });

         </script>
     </body>

I request someone spot me where the errors are, I would be really thankful to you. I could see only blank white screen in my browser :(

score 0 · Accepted Answer · answered Nov 13 '12 at 02:23

Add your nodes to the innermost rotate node - that way they will "inherit" the view, projection and modelling transforms set up by the lookat, camera and rotate nodes.

So give that rotate node an ID like "myYawRotate", then get a reference to that node off the scene:

var myRotate = scene.getNode("myYawRotate");

and add your cube branches to that node:

myYawRotate.add("node", { ...

This is a scene graph concept called "state inheritance". It fits with the data-driven approach of the API, helping scene graph brevity and pluggability, but also performance because the transform matrices will be set once for all the cubes on each frame (an aspect of "state sorting").

You'll also need to insert lights in amongst the higher transforms, plus a material node. Then you have all the state that SceneJS needs to render the cubes in a way that you can see them.

In your example, what's probably happening is you do have cubes rendering, but with no illumination, and not transformed into View space and projected.

myYawRotate.add("node", { ... I suppose this should be, myRotate.add("node", { ... Since you already take instance of "myYawRotate" to "myRotate" ?? — three.jsaddict, Nov 13 '12 at 13:08
I did as you suggested, I used light, and myyawrotate of type "rotate" as inner node, there after yawroate I mentioned material node. Accessed the myyawrotate off scene and bound my cubes. But still able to see the same white blank screen. I even couldn't able to see the canvas. I used directional light source. Is there any help section in github from xeolabs so that I could post my example there. — three.jsaddict, Nov 13 '12 at 13:16

How to Distribute Random cubes in a Scene using SceneJS?

1 Answers1