Graphics come in Three(.j)s

If you are looking for a powerful JavaScript library to display 3D graphics in a web browser, then meet Three.js. This handy library can get you set up with some stellar graphics with just THREE components. And here they are:

Scene

First off we have the Scene. This is the component that houses the 3D environment that we are going to be creating. There really isn't much to this part of working with Three.js, all you have to do is create a new instantiation of one like so:

var scene = new THREE.Scene();

As I said the scene is what will hold everything that we want to display as well as be able to provide a background. We can do this with the following methods:

scene.background = new THREE.Color( 0xcce0ff );

scene.add(thing);

Camera

Next up is the Camera. This is going to determine everything related to our viewpoint in the scene. There are multiple types of cameras that Three.js has to offer including a stereoscopic, orthographic, and a perspective camera, and for the sake of this post we are just going to stick with the perspective camera since it is what we tend to think of when we think of a camera dealing with 3D spaces. Once again we need to create a new instantiation, this time passing in some values so lets look at what those are right here:

var camera = new THREE.PerspectiveCamera( FOV, AspectRatio, NearClipping, FarClipping );

The perspective camera takes in a field of view value first which is going to determine the extent of the scene that is seen on the display at any given moment. This value is input as degrees. The next is the aspect ratio, this describes the proportional relationship between the width and height of the view. This is commonly done with window.innerWidth / window.innerHeight to easily get the aspect ratio of the current window. Finally we have the near and far clipping planes. These values determine how near or far an object can be compared to the camera before it is no longer rendered. This is necessary to not render objects that are no longer relevant to the camera and the user and save processing resources.

Renderer

Finally the last of our three necessary components is the renderer. This piece is in charge of putting all of our work on the web page. Once again we just instantiate a new one using:

var renderer = new THREE.WebGLRenderer( {antialias: true} );

and we pass in an object of settings for the renderer, but the most common and simple implementation is the one above with antialias set to true. Once again there are a few different built in renderers to choose from but the one listed above is the simplest and most commonly used. Every built in renderer uses WebGL which is a JavaScript API for rendering interactive 2D and 3D graphics in compatible web browsers without plugins.
The next important step with the renderer is to set its size, which will be the size of the screen through which we see this 3D world:

renderer.setSize( window.innerWidth, window.innerHeight );

Finally we want to put the renderer to our webpage so we can actually see it:

document.body.appendChild( renderer.domElement );

Finishing touches

Now we have a whole 3D space on our web page using Three.js. It's a tiny bit empty so lets quickly add a little cube in there and animate it:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

And don't forget to call the render function on your renderer passing in your scene and camera!