Highrise Jets

K1406059 - Robert G

Kingston University, CI6510 - Optimised Programming For Game Devices

This is a basic ThreeJs demo demonstrating basic 3D programming techniques for the web. It is an animated jet flying through a series of highrise skyscrapes, and "looping around" to the beginning to fly through them again. It was implemented as such:

First of all, all the required libraries were declared at the top of the program. That includes the Three.js core library, trackball controls and several object loaders.

Then, the initialization function was implemented. In that function, the scene and perspective camera were declared and initialized. Then, the WebGL renderer was declared, with shadow map enabled and blue background colour.

Then, all the objects, along with their textures were loaded in, using multiple object loading libraries. Then I have declared the trackball controls, declared the objects to use shadows and enabled the shadow map. I also created a spotlight that point down from the sky onto the scene.

In the animate() function I update the controls to allow the camera movement. Then, after a nullcheck, I move the spacecraft across the screen at a constant rate. The spotlight follows the craft position. If the craft hits one end of the scene, it spawns semi-randomly on the other end, and starts flying through the scene again. Then the camera renders the scene and the result is shown on screen.

In the end, it was an interesting project that allowed me to test OpenGL technology on the web and see how it differs from its non-web counterpart. I was able to implement basic functionality and experiment with different aspects of the Three.js library. All in all, a fresh, enriching experience, and I have learned quite a lot.