WASD to move
Mouse to look around
E to jump or release rope

To show how to put together ThreeJS design concepts into a complete project, I created a little game called Climber. Click in the box to activate the Pointer Lock API. Now the mouse cursor is hidden and the mouse movement controls the angle of the camera. Use the WASD keys to move the camera’s position around.

Wow! Now you’re navigating a 3D world!

Games take forever to make. There are so many things to keep in balance: aesthetics, complexity, engagement, expected gameplay elements, strategy. As you add these things to your game, they make adding more elements all the more complicated.

Lean Workflow

To prevent myself from starting this project and getting lost before reaching the end, I used principles from the Lean workflow system. To do this, I kept the game as simple as possible focusing only on the most necessary elements. Once I had a beginning, middle and end, I ITERATED new versions of the game adding the harder stuff like physics and sound with each new iteration. First, I added player movement and controls.

Pointer Lock API

Don’t you hate it when you’re playing a web game and you accidently click outside the borders and your character gets stuck? I thought so. The Pointer Lock API (available to modern browsers) fixes this problem by only allowing clicks and mouse movement within the borders of your game.

Controls

If you dig through the threeJS examples on their site, you will find lots of references to little plugins to use in your projects. I found one by mrdoob called PointerLockControls.js that worked nicely with my game. It’s a little confusing because the PointerLockControls.js script doesn’t include the Pointer Lock API. You’ll have to include it yourself in a click event for example.

var controls = new THREE.PointerLockControls(camera);
var player = controls.getObject();
scene.add(player);

That covers mouse control. Now, I need keyboard controls. For keyboard, I used a plugin by Jerome Etienne THREEx.KeyboardState.js

var keyboard = new THREEx.KeyboardState();

Data Structures

At IndieCade last year, I heard a talk by Galaxy Kate about procedural programming and procedurally generated games. She emphasized using data structures instead of “if statements.” The platforms array is a good example of this.

// set up objects
var platforms = [
	{x: 5.5,  y: 0,   z: 1,    rope: 0,   width: 5,  depth: 10}, // just above ground level
	{x: 8.5,  y: 10,  z: -8.5, rope: 0,   width: 4,  depth: 3}, // isolated
	{x: 5,    y: 19,  z: 8,    rope: 15,  width: 4,  depth: 4},
	// ...
];

Materials

To give the coins in my game a shiny metal look, I used a MeshPhongMaterial with an environment map or envmap. An environment map is 6 images that represent the environment to create the illusion that the material is reflecting its surroundings.

var coinMaterial = new THREE.MeshPhongMaterial({color: 'gold', specular: 'white', shininess: 100, envMap: coinBg, reflectivity: 0.2, combine: THREE.MixOperation});

Collisions

Collisions can be costly in terms of performance. To keep things simple, I considered the camera to be a single point and platforms and ropes to be boxes.

Physics

To make the ropes swing around, I used Oimo.js, a physics library ported from ActionScript by loth. I used the webworker example which allows the expensive physics calculations to be done in a new thread. At first the rope segments were flying all over the place. It took some practice to get the mesh objects their associated physics bodies aligned.

Post Processing

I played a little with AlteredQualia’s postprocessing EffectComposer. The RGBShiftShader splits the colors a little when you land, creating a glitch effect.