Let there be lights. Three.js part 2

See the Pen Pink box with dat.gui by chris-creditdesign (@chris-creditdesign) on CodePen

I’ve made a few improvements to my spinning pink box over the last week - most notably adding two three.js lights and some dat.gui controls. I’ll attempt to talk you through what I’ve learned about lights here and save the dat.gui controls for my next post.

Antialiasing

The first change I made was to ask the WebGLRenderer to use antialiasing. This is simply done by setting the renderer’s antialias property to true.

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

This tells the renderer to add semi-transparent pixels to smooth out all of the jagged diagonal lines and reduce that lego brick look. Type designers and hardcore gamers will know all about this.

Material world

Next I swapped the wireframe appearance for a solid shinny material by switching:

var material = new THREE.MeshBasicMaterial({color: "hotpink", wireframe: true, wireframeLinewidth: 10});

to:

var material = new THREE.MeshPhongMaterial( {color: "hotpink", ambient: "hotpink" } );

The inbuilt Three.js material MeshPhongMaterial makes use of Phong interpolation a technique developed by the computer graphics pioneer Bui Tuong Phong way back in 1973. Basically it allows 3D surfaces to reflect light in a convincing way.

I’m going to keep things simple for now and just set two properties, color and ambient, both to hotpink.

The color property handles the diffuse reflections. These come into play when direct light hits our material and will cause that light to be reflected in a similar manner to light reflecting off a matte surface such as paper in the real world.

We could also at this point set a specular colour that would reflect light as if the box was made of a shiny material. Generally diffuse and specular reflections will be skilfully combined by 3D artists to achieve realistic results but as I said, K.I.S.S.

The ambient colour property controls how non direct or ambient light should be reflected. It will reflect the same colour from all surfaces without any shading in much the same way as our old MeshBasicMaterial. You can think of this as the base colour of the material. The default ambient colour is white, meaning that if we don’t specify a colour the cube will be invisible on our background.

Let there be light

Now you might have noticed that the two colour properties set on our new material both work with reflections of light. At the moment our scene has no light it in so if we were to apply this material now we would just see a black box floating in space. Not cool.

I’m going to apply two lights to make our scene look a bit more friendly, a spot light and an ambient light. Thankfully we can rely or Three.js to do most of the heavy lifting for us once again.

We apply a spot light by simply creating the light and setting it’s colour to white. Then moving it to the coordinates -100, 100, 100. That’s left by 100, up 100 and towards us 100 just so that it is not dead centre in our scene and will shine its light onto our box. Finally we add the light to the scene.

var sLight = new THREE.SpotLight( 0xffffff );
sLight.position.set( -100, 100, 100 );
scene.add( sLight );

With a single spot light alone you’ll now notice that the surfaces that are being hit by the light are reflecting a pink colour as we might expect. However as the surfaces turn away from the light they get very dark very quickly and those that aren’t getting any light are 100% black. This doesn’t look very realistic.

To fix this we’ll apply an ambient light. An ambient light doesn’t have a position or a direction and simply applies the same amount of light to all points on a surface in a manner that goes some way to simulating to effects of sunlight. We can simply create a white ambient light like this:

var aLight = new THREE.AmbientLight( 0xffffff );
scene.add( aLight );

Now we should have a nice subtle lighting effect applied to our floating pink box that smoothly fades from quite bright to not so bright and back again.

Thanks for following along so far. Please feel free to fork my pen and play around with the settings and tweet me @creditdesign if I’ve told any porkies above.

Once again I can’t recommend Eric Haines’ Udacity course Interactive 3D graphics enough.