Canvas3D JS Library

From CDOT Wiki
Jump to: navigation, search
This page may be obsolete.
It contains historical information.


The Canvas 3D JS Libary (C3DL) is a Javascript library that will make it easier to write 3D applications using WebGL. It provides 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.



For the library, samples, and tutorials, go to

As of c3dl 2.0, our library uses WebGL. Any WebGL enabled browser will be able to view our content. To get a WebGL enabled browser see Tutorial 1 from our website and you do not need any addons.

For all older versions of c3dl, you will need the canvas 3D addon available here: You can get the extension from (use for authentication).

NOTE: It is HIGHLY recommended that you do not use the older version of our library but to use version 2.0 or higher.


Related Resources


Documentation can be found on our website:

Ideas List

Here are the wishlist of things we want to be able to do with the library.... If you want something add it to the list.

  • 3D Asteroids - Good use of Collision detection, animation, particles, camera work, both mouse and keyboard controls.
  • Solar System Explorer - Pull the positions of our planets from some sort of webservice and display them, allowing users to see their relative alignment.
  • Simulation of 3D path finding
  • 3D graphs
  • Display social networks and their relationships
  • Get earthquake Richter-scale values from a service and show graphs on a map
  • Display 3D graphs beside one another, gas prices along stock market values
  • 3D flowcharts
  • 3D Traceroute - graphical view of an IP's path across the internet. More details in this blog post
  • 3D Canvas Racing Demo - like this but better, to show that it's both easier to use, more functionality is available, and runs much faster (hopefully)
  • Molecule Viewer - Rotate 3D molecules. Similar to this
  • 3D Sudoku
  • 3D Rubik's Cube
  • House Explorer/Designer - Load a mesh of a room or a house and allow users to navigate through the environment or design a room in a house.
  • 3D Photo Album - Download images and create a 3D photo album similar to this.
  • Matrix - Query search engines for sites, chat logs, blogs, etc. and display all the text in a matrix-like fashion.
  • Really fancy animation of a bar graph, with columns growing and arrow moving. Will be an instant hit with business people. Usable as easy as google's toy


  • Generic model viewer application, with back/forward/index + zoom/rotate buttons that would download and display models from the web. Would have to be able to convert 3dsmax models in JS. So a museum or such could just slap the app on the page and give it an array of URLs for the stuff to show.
  • Pong. Should be fairly easy, we just need to code the collision detection.
  • multi-player network air hockey. Supports up to 8 players. Create an arena based on number of players . Each wall has a hole and a paddle that players can move left and right. A ball is randomly sent flying and each time it goes through a hole, the player loses a point. Lose 10 points and that player is eliminated. Last person alive wins.
  • 2 Player Online Chess
  • Orbit camera can be used to orbit around the board.
  • Effects can be used to change what material the pieces and board use such as metal, wood, etc.
  • Picking can be used to allow a simple interface to move the pieces. Either clicking on two tiles can move a piece or clicking on a piece and then a tile can move the piece.
  • Further research is needed to determine the best server-side language to use to share board state between players.
  • Animation can be achieved simply by setting velocities of pieces.