Introduction

When I first began studying web development several years ago I was attracted to 3D graphics, having come from an architecture background where I did a lot of work in 3DsMax, and later Revit. I ended up doing a group project that combined my love of 3D with motion tracking using the Leap Motion tracker. The result was a 3D hand controlled version of the classic game Pong, built using the ThreeJS library. My interest in 3D has persisted, through playing games like Portal. Eventually I decided it was time to try some more development. Question was: where to begin?

You can read my article about creating Crazy Leap Pong here

Rediscovering the joy of Descent

One of the first computer games I played intensely was the 3D shooter game Descent. This was where I was introduced to the concept of portal rendering, only rendering what needs to be rendered in 3D. Descent handles this concept quite nicely since the setting consists of mines with multiple chambers. If you're in one chamber and there's a door, there's no need to render the next chamber until you open the door. I decided that this would be a good exercise for creating a navigable 3D experience. My previous work had been simple simulations of objects in motion.

Creating the opening scene

I decided to create a simple chamber to chamber environment, where the two chambers would be linked to a tunnel that would only be revealed after a door was opened. I quickly realized that cubes in 3D have no "solidity" unless you specify that they do; otherwise, they are simply objects with six sides that you can't see through. Therefore, I simply created a cube and placed my camera inside of it.

Open, Sesame

I handled collision detection by using the ThreeJS Raycaster to determine if the direction of travel would intersect one of the sides of the surrounding cube. In order to escape the chamber, the user would need to navigate to the door and press a key.

This action would trigger the rendering of the rest of the environment: the tunnel and the other chamber. Until this point the starting chamber was the extent of the world. I used another library to handle the union operation to combine the newly rendered tunnel and destination chamber with the starting chamber into one mesh.

Demo

The CodePen is below. Feel free to explore.