Lighting 3D depths

You can think of 3D as the objects in a scene, but there are also unseen objects such as the lights and camera. This next web advertisement animates a camera while deploying two different light sources: neon lights and spotlights. To add a little character, the spotlights flicker and the neon sign turns on in a sequence.

Engage thrusters

The advertisement begins with the camera animation and the lights randomly turning on in order to catch the viewers' attention. This also emphasizes the features of 3D that cannot be emulated in a 2D animation without a heavy download. The camera points to a fixed target while slowly animating from the left of the 3D scene towards the center by changing the camera's eye value. This is shown in the following screenshot:

We begin by defining the start and end positions for the camera:

var eyeStart = [ -10, 5, -2, 1 ];
var eyeEnd   = [ -6, 3, 6, 1 ];
var eye    = [ eyeStart[0], eyeStart[1], eyeStart[2], 1 ];

Within the drawScene() function, the...