我的 HTML 代码:
<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>
我的 SceneJS 脚本:
<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>
首先抱歉,如果我避免发布此问题的任何规则。我的目的是找到问题的解决方案,但仅此而已。SceneJS API 对我的编程来说是非常新的,但我正在努力编写最好的代码。我试图在整个空间中打印立方体并计算相应的 FPS。我什至看不到屏幕上的画布,而只是空的浏览器。我一直在尝试不同的方法(几乎完全编辑了以前的版本)来修复它,但我的努力是徒劳的。我请求是否有人在这个问题上帮助我。我非常感谢这个人。