What is WebGL and Three.js?

Three.js is a lightweight 3D library that hides a lot of the WebGL complexities and makes it very simple to get started with 3D programming on the web. Three.js can be downloaded from github or the three.js website, where you will also find links to documentation and examples.

In my first tutorial, I showed you how to setup a basic Three.js application. In that tutorial, I talked about setting the stage, building a scene, and animating a simple cube. In my second tutorial, I explained texture mapping and showed three different ways to texture objects using Three.js.

In this tutorial I’m going to go over lighting in Three.js. I’m going to explain the following five different types of lights and how to use each one: directional lights, ambient lights, point lights, spot lights, and hemisphere lights.

To view this demonstration, you will need a WebGL compatible browser. If you have a recent version of any major browser, you should be able to view it. If you are running an older version of Internet Explorer or viewing this on a mobile device, you may be out of luck. You can view the result of this tutorial here, and the source code can be found here.

Getting Started

In this tutorial I’m going to begin with a simple HTML file similar to the one I used in my previous tutorial:

The HTML assumes that you have downloaded the minified three.js library and saved it in a folder named ‘js’. It also assumes that you have copied the OrbitControls.js file to the same location. The OrbitControls.js file can be found packaged with Three.js in the path ‘examples\js\controls’.

The OrbitControls will allow us to rotate the scene by left clicking and dragging, pan the scene by right clicking and dragging, and zooming by scrolling the mouse wheel. I’ve also created my application, three-light-tut.js, and saved it in the same ‘js’ folder. Below is the starting code for our application:

var camera;
var scene;
var renderer;
var controls;

init();
animate();
function init() {
 // Create a scene
 scene = new THREE.Scene();
 // Add the camera
 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
 camera.position.set(0, 100, 250);
 // Add scene elements
 addSceneElements();
 // Add lights
 addLights();
 // Create the WebGL Renderer
 renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 // Append the renderer to the body
 document.body.appendChild( renderer.domElement );
 // Add a resize event listener
 window.addEventListener( 'resize', onWindowResize, false );
 // Add the orbit controls
 controls = new THREE.OrbitControls(camera, renderer.domElement);
 controls.target = new THREE.Vector3(0, 100, 0);
}
function addLights() {
 var dirLight = new THREE.DirectionalLight(0xffffff, 1);
 dirLight.position.set(100, 100, 50);
 scene.add(dirLight);
}
function addSceneElements() {
 // Create a cube used to build the floor and walls
 var cube = new THREE.CubeGeometry( 200, 1, 200);
 // create different materials
 var floorMat = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/wood-floor.jpg') } );
 var wallMat = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/bricks.jpg') } );
 var redMat = new THREE.MeshPhongMaterial( { color: 0xff3300, specular: 0x555555, shininess: 30 } );
 var purpleMat = new THREE.MeshPhongMaterial( { color: 0x6F6CC5, specular: 0x555555, shininess: 30 } );
 // Floor
 var floor = new THREE.Mesh(cube, floorMat );
 scene.add( floor );
 // Back wall
 var backWall = new THREE.Mesh(cube, wallMat );
 backWall.rotation.x = Math.PI/180 * 90;
 backWall.position.set(0,100,-100);
 scene.add( backWall );
 // Left wall
 var leftWall = new THREE.Mesh(cube, wallMat );
 leftWall.rotation.x = Math.PI/180 * 90;
 leftWall.rotation.z = Math.PI/180 * 90;
 leftWall.position.set(-100,100,0);
 scene.add( leftWall );
 // Right wall
 var rightWall = new THREE.Mesh(cube, wallMat );
 rightWall.rotation.x = Math.PI/180 * 90;
 rightWall.rotation.z = Math.PI/180 * 90;
 rightWall.position.set(100,100,0);
 scene.add( rightWall );
 // Sphere
 var sphere = new THREE.Mesh(new THREE.SphereGeometry(20, 70, 20), redMat);
 sphere.position.set(-25, 100, -20);
 scene.add(sphere);
 // Knot thingy
 var knot = new THREE.Mesh(new THREE.TorusKnotGeometry( 40, 3, 100, 16 ), purpleMat);
 knot.position.set(0, 60, 30);
 scene.add(knot);
}
function animate() {
 renderer.render( scene, camera );
 requestAnimationFrame( animate );
 controls.update();
}
function onWindowResize() {
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize( window.innerWidth, window.innerHeight );
}

Directional Lights

Directional lights are a common form of lighting when creating an outdoor scene, but can be used in any scene. A directional light represents a light similar to the sun. It’s a light that is very far away and shines in one direction. Just like the sun, because it’s so far away, all of the rays run parallel to each other. Also, because this light acts as if it’s infinitely far away, the position of the light does not matter, only the angle of the light…sort of. Here is the code for our light:

var dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(100, 100, 50);
scene.add(dirLight);