The Easy Start to 3d-in-a-Browser (Three.js)

Step One: Find a Decent Browser

Can you see the cube below this text? If not try FireFox or Chrome! Try this site to tell you if your browser has WebGL support:

Step Two: Get Three.js and Try It!

You can do things the hard way by making a "canvas" tag on your page, and manually starting WebGL (I do this), but you'll need a lot of background knowledge on 3d maths and perspective. You can skip all that by using the Three.js API, which lets you work at a much, much higher (more abstracted) level. Three.js will even add the "canvas" tag to your page, so you don't really have to do much at all.

First, download three.js from and unzip somewhere. You can try the examples in the "examples" folder. To make a simple test page, you can create a new, empty HTML page with a head and a body. Include the main "ThreeJS" JavaScript file inside the head tags like this:

"This code creates a scene, then creates a camera, adds the camera and cube to the scene, creates a <canvas> renderer and adds its viewport in the document.body element."

Paste this anywhere inside your html tags (right click and inspect the source of this page to see how I did it).