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: http://www.doesmybrowsersupportwebgl.com/.

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 http://threejs.org/ 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).