My Html Code:
<body onload= "main()" bgcolor="white">
<div>
<label id="3dobjects">test</label>
</br>
<canvas id="theCanvas" width="720" height="405">
</canvas>
</br>
<label id="fpsout"></label>
</div>
</body>
My SceneJS Script:
<script type="text/javascript">
var N=10;
function average(v){
var items = v.length;
var sum = 0.0;
for (i = 0; i<items; i++)
sum += v[i];
return (sum/items);
}
function main()
{
SceneJS.createScene({
type: "scene",
id: "theScene",
canvasId: "theCanvas",
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 : 1.78,
near : 0.10,
far : 300.0
},
nodes: [
{
type: "renderer",
clearColor: { r: 0.0, g: 0.0, b: 0.0 },
clear: {
depth : true,
color : true
},
nodes: [
// Light Source
{
type: "light",
mode: "point",
color: { r: 1.0, g: 1.0, b: 1.0 },
diffuse: true,
specular: true,
pos:{ x: 10.0, y: 10.0, z: 10.0 }
},
// Tranform
{
type: "rotate",
id: "pitch",
angle: 0.0,
x : 1.0,
nodes: [
{
type: "rotate",
id: "yaw",
angle: 0.0,
y : 1.0,
nodes: [
// Lights Properties
{
type: "material",
id:"cubeviewspace",
emit: 0.1,
baseColor: { r: 0.8, g: 0.8, b: 0.8 },
specularColor: { r: 0.8, g: 0.8, b: 0.8 },
specular: 0.7,
shine: 10.0
}
]
}
]
}
]
}
]
}
]
}
]
});
var scene = SceneJS.scene(theScene);
for(var i=0; i<N; i++){
scene.findNode("cubeviewspace").add("node",{
type:"translate",
id:"balltrans"+i,
x:(Math.random()-0.5) * scale,
y:(Math.random()-0.5) * scale,
z:(Math.random()-0.5) * scale,
nodes:[{
type: "cube",
id: "ball"+i
}]
});
}
// Printing Number Of Cubes
document.getElementById('3dobjects').innerHTML = "The number of Cube Objects: " +N;
var t0 = (new Date()).getTime();
var t = 0;
var fpss = [];
scene.start({
idleFunc:function(){
var t1 = (new Date()).getTime();
fpss.push(1000/(t1 - t0));
if(fpss.length>200)
fpss.shift();
// Printing fps
document.getElementById('fpsout').innerHTML = "The number of Cube Objects: " +average(fpss);
t0 = t1;
t++;
}
});
}
</script>
First of all sorry, If I avoid any rules for posting this question. My intention was to get the solution for the problem but nothing else. SceneJS API is very new to my kind of programming, yet I'm trying to code my best. I was trying to print cubes all over the space and also calculate the corresponding FPS. I couldn't see even canvas on the screen but only just empty browser. I have been trying different sorts of ways(almost edited previous version completely)to fix it, but my effort going vain. I request if someone help me in this issue. I'm seriously thankful for the person.
