Tutorial #2: A simple scene

Before we begin

This tutorial will demonstrate the basics of using the Canvas 3D Library (C3DL). Before you begin this tutorial, make sure you have a browser that is webGL enabled.Tutorial #1 describes how to do this. Download the canvas 3d JS api. Make sure you download a version that is 2.x or higher. Earlier versions of C3DL use canvas 3D which is the precursor of webGL. This tutorial was written for release 2.0 of the C3DL. You will also need a model and texture for this tutorial. You can download a pre-made model of a duck here: duck collada file : duck.dae duck texture file: duck.png

Goal:

Demonstrate how to setup and use the Canvas 3D JS library by creating a web page with a canvas element that shows a rotating object.

How to organize your files:

In your working directory:
  • unzip a release of the library
  • Create a directory for your demo. In this example, the working directory is called mydemo. The downloaded canvas3d api is in a folder named canvas3dapi. The code that you will write will be placed into the mydemo folder.
  • Place all models and textures in the mydemo folder. If you wish to further organize your models, you will need to modify the js to reflect this. As long as the folders where these resources are located are inside the mydemo directory, it will be fine. However, keep in mind that for security reasons models and textures cannot be placed in a higher directory.

Warning: By default Chrome/Chromium and Safari/Webkit will not allow your pages to open local .dae files. If you are going to test locally, you’ll need to use Firefox/Minefield or add the flag –allow-file-access-from-files when starting Chrome or Chromium. This is not an issue if you have a remote machine on which to do these tutorials.

The HTML document

Inside the mydemo folder, start by creating a simple html page. 
<html>
    <head>
        <title>Canvas3D tutorial #2: A Simple Scene</title>
        <script type="application/javascript" src="../canvas3dapi/c3dapi.js" ></script>
        <script type="application/javascript" src="tutorial2.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 tutorial2.js (if you want to name it something else, feel free to do so but you will need to modify the script tag <script type=”application/javascript” src=”tutorial2.js”></script> in the html file accordingly): 
// Tutorial 2: the javascript
// The models used need to be parsed before the page
// render. This code will parse the model files
// and when this is 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;

// 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);

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

Result

Opening the html file from a webGL enabled browser and should see a rotating model of a duck . Your result should look like what is shown in the short video below: