Learning Three.js: Part 4: Light Sources

Requirements:

In Part 1, I covered some general terms and techniques used in Three.js, a three-dimensional rendering JavaScript library. Part 2 reviewed some of the geometry and material options in creating meshes. Part 3 demonstrated how to load and use textures (images) for those same meshes as a continuation of building from the first example code. In this fourth part, I show examples using the light source objects PointLight, SpotLight, and AmbientLight.

PointLight

PointLight is an omnidirectional light source with an intensity decay in a spherical shape out from its initial source position.

var camera, scene, renderer, geometry, material, mesh;
var texture, lightsource;
function init() {
// Load a texture
texture = new THREE.TextureLoader().load( "checkered.png" );
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshPhongMaterial with a loaded texture
material = new THREE.MeshPhongMaterial( { map: texture} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create a PointLight with the color white (0xffffff), intensity of 10, and distance of 10
lightsource = new THREE.PointLight( 0xffffff, 10, 10 );
// Set the position to 4, 4, 4
lightsource.position.set( 4, 4, 4 );
// Add the light to the scene
scene.add( lightsource );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Renderer
renderer = new THREE.WebGLRenderer();
// Set the size of the renderer to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}

view raw
part4PointLight.js
hosted with ❤ by GitHub

Returning to the example code from Part 3, a PointLight can be added through only a few lines of code. However, in adding in a PointLight source, the material type must change away from Basic in order to show the light source.

yvf4peqfw4

SpotLight

Unlike PointLightSpotLight emits only in one direction from a single distant position.

var camera, scene, renderer, geometry, material, mesh;
var texture, lightsource;
function init() {
// Load a texture
texture = new THREE.TextureLoader().load( "checkered.png" );
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshPhongMaterial with a loaded texture
material = new THREE.MeshPhongMaterial( { map: texture} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create a SpotLight with the color white (0xffffff)
lightsource = new THREE.SpotLight( 0xffffff );
lightsource.position.set( 10, 10, 10 );
// Add the light to the scene
scene.add( lightsource );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Renderer
renderer = new THREE.WebGLRenderer();
// Set the size of the renderer to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}

view raw
part4SpotLight.js
hosted with ❤ by GitHub

Returning to the Part 3 example code again, a SpotLight can be added through setting a light color only. While PointLight needed an intensity, distance, and position, SpotLight only needs a light color because it emits from a distance into a scene.

lajkaebsr1

AmbientLight

Similar to PointLightAmbientLight expands outward instead of from a single point. However, it also broadcasts completely through the scene to all objects that can receive it.

var camera, scene, renderer, geometry, material, mesh;
var texture, lightsource;
function init() {
// Load a texture
texture = new THREE.TextureLoader().load( "checkered.png" );
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshPhongMaterial with a loaded texture
material = new THREE.MeshPhongMaterial( { map: texture} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create an AmbientLight with the color red (0xff0000)
lightsource = new THREE.AmbientLight( 0xff0000);
// Add the light to the scene
scene.add( lightsource );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Renderer
renderer = new THREE.WebGLRenderer();
// Set the size of the renderer to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}

view raw
part4AmbientLight.js
hosted with ❤ by GitHub

Using the same example code, the green part of the checkered pattern texture can be filtered out through using only ambient red light. The result “transforms” the green into red and the red side into black.

rafsdaa5q9