Tutorial #2: A simple scene
Before we beginThis 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 documentInside the mydemo folder, start by creating a simple html page.