Animasjon av struktur
Vi legger til en funksjon, animateScene, som skal kjøres ved hver oppdatering.
_test.html
// start spin as soon as the scene is loaded
function animateScene(){
// Make sure we have a scene and that it is complete
// no tasks left to do (load)
if((!myScene) || (myScene.getStatus().numTasks!=0)){
setTimeout(animateScene, 100);
return;
}
// Locate nodes with rotation angle and rotate
var leftArmNode=myScene.getNode("LeftArmRotate");
var rightArmNode=myScene.getNode("RightArmRotate");
var leftLegNode=myScene.getNode("LeftLegRotate");
var rightLegNode=myScene.getNode("RightLegRotate");
myScene.on("tick",
function () {
angleStep=calculateNewAngleStep(leftArmAngle,angleStep,100.0,260.0);
leftArmNode.setAngle(leftArmAngle += angleStep);
rightArmAngle=-leftArmAngle;
rightArmNode.setAngle(rightArmAngle);
leftLegAngle=leftLegAngle-angleStep;
leftLegNode.setAngle(leftLegAngle+180);
rightLegAngle=-leftLegAngle;
rightLegNode.setAngle(rightLegAngle+180);
});
}
Beskrivelsen av selve scenen blir ganske omfattende og ikke triviell å arbeide mede:
_test.html
myScene= SceneJS.createScene({
// use my canvas
canvasId: "myCanvas",
// Make it transparent
transparent: true,
// allow different materials on each part
nodes:[
{
type: "cameras/orbit",
yaw: 30,
pitch: -30,
zoom: 30,
zoomSensitivity: 1.0,
nodes:[
// walker
{
id:"BodyRotate",
type:"rotate", x:1.0,angle:-90,
nodes:[
// body
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"body",
type:"geometry/box",xSize:xW,ySize:yD,zSize:zH,
}
]
},
//arm-left
{
type:"translate",x:3.0*xW/2.0,y:yD/2.0,z:0.7*zH,
nodes:[
{
id:"LeftArmRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.4*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"armleft",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-zH/2
}
]
}
]
}
]
}
]
},
//arm-right
{
type:"translate",x:-3.0*xW/2.0,y:-yD/2.0,z:0.7*zH,
nodes:[
{
id:"RightArmRotate",
type:"rotate", x:1.0,angle:30,
nodes:[
{
type:"translate",x:0,y:0,z:0.4*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"armright",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-zH/2
}
]
}
]
}
]
}
]
},
//leg-left
{
type:"translate",x:xW/2.0,y:0.5*yD,z:-1.1*zH,
nodes:[
{
id:"LeftLegRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.6*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"legleft",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-0.7*zH
}
]
}
]
}
]
}
]
},
//leg-right
{
type:"translate",x:-xW/2.0,y:-0.5*yD,z:-1.1*zH,
nodes:[
{
id:"RightLegRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.6*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"legright",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-0.7*zH
}
]
}
]
}
]
}
]
},
//head
{
type:"translate",x:0.05*xW,y:-0.4*yD,z:1.35*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
type:"geometry/box",xSize:0.7*xW,ySize:0.8*yD,zSize:0.3*zH
}
]
}
]
}
]
}
]
}
]
});
Og slik ser det ut, i en iframe. Du kan rotere med musa og zoome med musehjulet.
Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
test
https://borres.hiof.no/wep/webgl/scenejs/geometri/seks2/test.html
Websiden er i sin helhet slik:
_test.html
<!DOCTYPE html>
<html lang="no">
<head>
<title>simple</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<style>
body {margin: 0px;background-color: #ffffff;overflow: hidden;}
</style>
<script src="../../scenejs.js"></script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"> </canvas>
<script>
//globals
var myScene;
var canvas=document.getElementById("myCanvas");
SceneJS.setConfigs({
pluginPath:"../../plugins"
});
// we want to keep it square when rezinig window
function onWindowResize() {
canvas.width=canvas.height=
Math.min(window.innerWidth, window.innerHeight);
// update
myScene.needFrame();
}
// walkers dimensions
var zH=6.0;
var xW=3.0;
var yD=1.0;
// limbangles
var leftArmAngle=180;
var rightArmAngle=-180;
var leftLegAngle=0;
var rightLegAngle=0;
var angleStep=1;
function calculateNewAngleStep(Angle,step,min,max){
if((Angle > max)||(Angle < min))
return -step;
return step;
}
// animate
// start spin as soon as the scene is loaded
function animateScene(){
// Make sure we have a scene and that it is complete
// no tasks left to do (load)
if((!myScene) || (myScene.getStatus().numTasks!=0)){
setTimeout(animateScene, 100);
return;
}
// Locate nodes with rotation angle and rotate
var leftArmNode=myScene.getNode("LeftArmRotate");
var rightArmNode=myScene.getNode("RightArmRotate");
var leftLegNode=myScene.getNode("LeftLegRotate");
var rightLegNode=myScene.getNode("RightLegRotate");
myScene.on("tick",
function () {
angleStep=calculateNewAngleStep(leftArmAngle,angleStep,100.0,260.0);
leftArmNode.setAngle(leftArmAngle += angleStep);
rightArmAngle=-leftArmAngle;
rightArmNode.setAngle(rightArmAngle);
leftLegAngle=leftLegAngle-angleStep;
leftLegNode.setAngle(leftLegAngle+180);
rightLegAngle=-leftLegAngle;
rightLegNode.setAngle(rightLegAngle+180);
});
}
//Define scene
myScene= SceneJS.createScene({
// use my canvas
canvasId: "myCanvas",
// Make it transparent
transparent: true,
// allow different materials on each part
nodes:[
{
type: "cameras/orbit",
yaw: 30,
pitch: -30,
zoom: 30,
zoomSensitivity: 1.0,
nodes:[
// walker
{
id:"BodyRotate",
type:"rotate", x:1.0,angle:-90,
nodes:[
// body
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"body",
type:"geometry/box",xSize:xW,ySize:yD,zSize:zH,
}
]
},
//arm-left
{
type:"translate",x:3.0*xW/2.0,y:yD/2.0,z:0.7*zH,
nodes:[
{
id:"LeftArmRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.4*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"armleft",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-zH/2
}
]
}
]
}
]
}
]
},
//arm-right
{
type:"translate",x:-3.0*xW/2.0,y:-yD/2.0,z:0.7*zH,
nodes:[
{
id:"RightArmRotate",
type:"rotate", x:1.0,angle:30,
nodes:[
{
type:"translate",x:0,y:0,z:0.4*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"armright",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-zH/2
}
]
}
]
}
]
}
]
},
//leg-left
{
type:"translate",x:xW/2.0,y:0.5*yD,z:-1.1*zH,
nodes:[
{
id:"LeftLegRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.6*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"legleft",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-0.7*zH
}
]
}
]
}
]
}
]
},
//leg-right
{
type:"translate",x:-xW/2.0,y:-0.5*yD,z:-1.1*zH,
nodes:[
{
id:"RightLegRotate",
type:"rotate", x:1.0,angle:0,
nodes:[
{
type:"translate",x:0,y:0,z:0.6*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
id:"legright",
type:"geometry/box",xSize:yD,ySize:yD,zSize:-0.7*zH
}
]
}
]
}
]
}
]
},
//head
{
type:"translate",x:0.05*xW,y:-0.4*yD,z:1.35*zH,
nodes:[
{
type:"material",
color:{ r:1.0, g:0.5, b:0.0 },
nodes:[
{
type:"geometry/box",xSize:0.7*xW,ySize:0.8*yD,zSize:0.3*zH
}
]
}
]
}
]
}
]
}
]
});
//Scene defined
// pick up resizing, and do initial resize
window.addEventListener( 'resize', onWindowResize, false );
onWindowResize();
// start spinning (when scene has finished loading plugins and/or models)
animateScene();
</script>
</body>
</html>
