Requirements:
- Some knowledge of JavaScript
- Optional: An editor like Atom, NetBeans, or Sublime Text
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.
- Part 1: Terms and Techniques
- Part 2: Geometries and Materials
- Part 3: Loading and Using Textures
- Part 4: Light Sources
- Part 5: Controls
PointLight
A PointLight is an omnidirectional light source with an intensity decay in a spherical shape out from its initial source position.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 ); | |
| } |
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.
SpotLight
Unlike PointLight, SpotLight emits only in one direction from a single distant position.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 ); | |
| } |
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.
AmbientLight
Similar to PointLight, AmbientLight expands outward instead of from a single point. However, it also broadcasts completely through the scene to all objects that can receive it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 ); | |
| } |
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.
Digital Ephemera 