O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding materials, lights, and shadows

Adding new materials and lights in Three.js is very simple and is done in pretty much the same way as we explained in the previous section. We start by adding a light source to the scene (for the complete source, look at example 03-materials-light.html):

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );

The SpotLight() method illuminates our scene from its position (spotLight.position.set( -40, 60, -10 )). If we render the scene at this time, however, you won't see any difference with the previous one. The reason is that different materials respond differently to light. The basic material which we used in the previous example (by using the MeshBasicMaterial() ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required