Tutorial #3: Callback

This tutorial will show how you can use a simple callback function — spinduck — to control what goes on in the scene.

Before we begin

  • Ensure that you have a WebGL enabled browser.   Tutorial #1 describes how to do this.
  • Download the canvas 3d JS api.  This tutorial was written using release 2.x+
  • Set up the library along with a folder for you demo in the same manner as that described in Tutorial #2
  • You will also need a model and texture for this tutorial. You can download a pre-made model of a duck here:

The HTML document

Inside the mydemo folder, start by creating a simple html page. 
<html>
    <head>
        <title>Canvas3D tutorial #3: Callbacks</title>
        <script type="application/javascript" src="../canvas3dapi/c3dapi.js" ></script>
        <script type="application/javascript" src="tutorial3.js"></script>
    </head>
    <body>
        <!-- Add a canvas element to the page. It is scripted by using its id -->
        <canvas id="tutorial" style="border: 2px solid blue" width="500" height="500"></canvas>
    </body>
</html>

The JavaScript Code

Place the following code in a file called tutorial3.js and place that in the mydemo folder (you can name the file differently but if you do so you will need to change the html to reflect this). Most of this code is the same as that in Tutorial #2.  The changes are highlighted in bold. By adding this callback function, the duck will now spin for 3 seconds  one way then spin it the other way for 3 sec and go back the other way. 
// Tutorial 3: the javascript
// The models used need to be parsed before the page
// render. This code will parse the model files
// and when this complete the parser will call the
// main. The argument being passed - "tutorial" -
// is the id of the canvas element on the html page.

c3dl.addMainCallBack(canvasMain, "tutorial");
c3dl.addModel("duck.dae");
var duck;
var timesincelastchange=0;
var y=-0.001;

// This callback function is used by the scene class.  Every time
// the scene is updated, it will get called.

function spinduck(time){
 // time is in milliseconds. Thus 3000 millisecond is 3 seconds.
 timesincelastchange+=time;

 //if its been 3 sec or more since we stopped or started the spinning
 //change it.
 if(timesincelastchange >=3000){
 y = -1*y;
 duck.setAngularVel(new Array(0.0,y,0.0));
 timesincelastchange = 0;
 }
}
// The program main
function canvasMain(canvasName){

 // Create new c3dl.Scene object
 scn = new c3dl.Scene();
 scn.setCanvasTag(canvasName);

 // Create GL context
 renderer = new c3dl.WebGL();
 renderer.createRenderer(this);

 // Attach renderer to the scene
 scn.setRenderer(renderer);
 scn.init(canvasName);

 //the isReady() function tests whether or not a renderer
 //is attached to a scene.  If the renderer failed to
 //initialize this will return false but only after you
 //try to attach it to a scene.
 if(renderer.isReady() )
 {
 // Create a Collada object that
 // will contain a imported
 // model of something to put
 // in the scene.
 duck = new c3dl.Collada();

 // If the path is already parsed
 // (as it is in this case)
 // then the model is automatically retrieved
 // from a collada manager.
 duck.init("duck.dae");

 // Give the duck a bit of a spin on y
 duck.setAngularVel(new Array(0.0, -0.001, 0.0));

 // Add the object to the scene
 scn.addObjectToScene(duck);

 // Create a camera
 var cam = new c3dl.FreeCamera();

 // Place the camera.
 // WebGL uses a right handed co-ordinate system.
 // move 200 to the right
 // move 300 up
 // move 500 units out
 cam.setPosition(new Array(200.0, 300.0, 500.0));

 // Point the camera.
 // Here it is pointed at the same location as
 // the duck so the duck will appear centered.
 cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));

 // Add the camera to the scene
 scn.setCamera(cam);

 // add the callback function
 scn.setUpdateCallback(spinduck);

 // Start the scene
 scn.startScene();
 }
}

Result: