Canvas 3d JS Library

where 3D is born!
  • rss
  • What is C3DL?
  • Download
  • Tutorials
    • Tutorial #1: Installing Canvas 3D Addon
    • Tutorial #2: A Scene and a Cube
    • Tutorial #3: Update Callback
    • Tutorial #4: Models 101
  • Development News
  • Demos
    • Typing Game V2.1
    • Typing Game V3 (0.3 Release)
    • Explorer
    • Flickr - Picking
    • Ricochet
  • Resources
  • Contact
  • About

What is C3DL?

The Canvas 3D JS Libary (C3DL) is a javascript library that will make it easier to write 3D applications using canvas 3d. It will provide a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work.

If you are viewing this page with a canvas 3d enabled browser, you would see a textured spinning teapot inside the canvas area of this page. If not, you would see a screen shot.




teapotss1.png


The content above was created using the canvas 3d js library, release 0.3. The source code for the above is included below:

var cams = new FreeCamera();
var moverate=0.002;
function setupcanvas(canvasName){
  var renderers=new OpenGLES11();
  var scns = new Scene();

  scns.setCanvasTag(canvasName);
  scns.setRenderer(renderers);
  scns.setCamera(cams);
  rc= scns.init();
  if(rc){
    var lights = new LightManager(scns.getGL());
    lights.setPosition(0,new Array(0,10,-20,1));
    lights.setAmbient(0, new Array(3,3,3,3));
    lights.setDiffuse(0, new Array(4,4,4,1));
    lights.setSpecular(0,new Array(1,1,1,1));
    lights.enable(0,true);
    models=new Model();
    models.setTexture(scns.getGL(),"ball.jpg");
    models.init(teapot2Vertices,teapot2Normals,teapot2UVs,teapot2Faces);
    scns.addObjectToScene(models);
    cams.setPosition(new Array(0, 1, -2.25));
    cams.setLookAtPoint(new Array(0, 0, 0.001));
    scns.setUpdateCallback(movecam);
    scns.startScene();
  }
  return rc;
}
function movecam(time){
  var oldpos = cams.getPosition();
  var newx = Math.cos(time*moverate)*oldpos[0]-Math.sin(time*moverate)*oldpos[2];
  var newz = Math.cos(time*moverate)*oldpos[2]+Math.sin(time*moverate)*oldpos[0];
  cams.setPosition(new Array(newx,oldpos[1],newz));

}

Search

Demos

  • Explorer
  • Flickr - Picking
  • Ricochet
  • Typing Game V2.1
  • Typing Game V3 (0.3 Release)

C3DL Development News

c3dl text API

Andor already mentioned we have text. The implementation is rather hacky, but it works. What we do is create a 2D canvas, render the text into it using its text API and then use that 2D canvas as the texture for the 3D canvas.
The textre can be applied to any model, including a rectangle. Here’s [...]

New Road Model Added to 3D Map

Road Model Added
As I mentioned from a previous post I am working on getting the road models that Cathy made added to my demo.  I cleaned up and organized my code and now I have a cleaner and leaner demo with one road model being used.
The other road model is a corner so I have [...]

Tutorials

  • Tutorial #1: Installing Canvas 3D Addon
  • Tutorial #2: A Scene and a Cube
  • Tutorial #3: Update Callback
  • Tutorial #4: Models 101

Archives

C3DL Development News

Recent Comments

  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • c3dl text API
  • New Road Model Added to 3D Map
  • 3d Google Map Progress
  • Some text to look forward to
  • Limitations in the 2.0 context
  • Documentation Generators
  • Wavefront OBJ file to Javascript arrays
  • Next Demo - 3D Google Map
  • Source Code Uploaded
  • Deux demos
  • Got it! the addon is... - Bill Mill
  • Yes it does. The ad... - Cathy Leung
  • Does this run on fir... - Bill Mill
  • Hi Cathy, I'm sor... - Kamel Haddad
  • Kamel, I think pe... - Cathy Leung
  • Currently an object... - Andor
  • Hi ! Thanks for... - Haddad Kamel
  • Hello Haddad, You... - Cathy Leung
  • the problem you see... - Cathy Leung
  • Hi Mrs Leung ! Th... - Haddad Kamel



Canvas 3d JS Library

©2007- 2008 Canvas 3d JS Library

Disclaimer: This website is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
The Canvas 3d JS Library and Demos found on this website are licenced under the MIT License

Creative Commons License