K3D JavaScript Canvas Library/Tutorial

CanvasK3D tutorial
K3D objects have user definable properties describing the object's relative position from the origin and allowing simple animations that increment one or more of the object's angles or position vector elements over time. There are also properties describing how the object should be rendered by the engine. Playing with these properties is a good way of getting used to how they control the rendering of the object.

Example 1: Minimum simple page set-up and Hello World example K3D object
This example show how to set-up a simple HTML5 page with the minimum required to initialise a simple cube as a K3D object on a canvas:

How does it work?
The file sets up a basic HTML5 page structure with a single canvas element that K3D will used for rendering output. The K3D JavaScript libraries are imported. The inline JavaScript then gets the canvas DOM element to pass to K3D. A K3D.Controller object is created which is responsible for managing multiple K3D objects and rendering them onto the supplied canvas element. A simple 3D cube is then defined as a K3D.K3DObject, wireframe rendering mode is used. Various public properties are set to initialize the color, scaling (size) and animation properties. Finally the K3D object is added to the controller and the animation is started.

Example 2: Simple page set-up and bouncing light-sourced cube
This example builds on Example 1 and this time shows how to display the cube using the light-sourced rendering mode and use the built in simple animation to bounce the cube around a virtual bounding box:

How does it work?
As above in example 1, however this time drawmode = "solid" and shademode = "lightsource" are used to display the cube as solid polygons with default light-sourcing. In addition a virtual bouncing box is defined for the object, in which K3D uses to provide a simple animation of the cube bouncing around.

Example 3: Simple page set-up and texture mapped cube
This example builds on Example 2 and this time shows how to apply a texture to each side of the cube:

How does it work?
As above in example 2, however this time a texture image is loaded using the Preloader helper class. Once the image is loaded it is applied on each face of the cube object. K3D then texture maps the cube when rendered.

More advanced examples
Please study the files k3d_test.html along with scripts/k3ddemos.js and ultralight.html along with scripts/ultralight.js. Changing some of the parameters in the .js files and observing the results might be most useful. Using a JavaScript debugger (e.g. Firebug for Firefox, WebKit Inspector) may be useful once you have covered the basics of the library and how it works.