Game Development Reference
In-Depth Information
x = (col+1) * HORIZONTAL_UNIT - XSIZE * 0.5;
switch(type) {
case ' ': break;
case 'S':
spawnPoints.push(new THREE.Vector3(x, 0, z));
break;
case 'X':
var geo = new THREE.CubeGeometry(HORIZONTAL_UNIT,
VERTICAL_UNIT, HORIZONTAL_UNIT);
var material = new THREE.MeshPhongMaterial({
color: Math.random() * 0xffffff
});
var mesh = new THREE.Mesh(geo, material);
mesh.position.set(x, VERTICAL_UNIT*0.5, z);
scene.add(mesh);
break;
}
}
In order to see our world, we'll also need to add lighting (the easiest approach is one
or two
DirectionalLights
similar to what we used in the city project) and you may
also want to add fog to help with depth perception. You can manually adjust the
camera's
position
and
rotation
to see what you've just constructed, or temporarily
add
FirstPersonControls
similar to what we used in the city project. Since we are
only using our map to add walls, you should add a floor as we did in the city project
as well, using a single large plane.
Constructing a player
Now that we have a world, let's create a player that can move around in it. We'll
need a
Player
class to keep track of each player's state, so let's extend
THREE.Mesh
in
a new file, which we'll call
player.js
:
function Player() {
THREE.Mesh.apply(this, arguments);
this.rotation.order = 'YXZ';
this._aggregateRotation = new THREE.Vector3();
this.cameraHeight = 40;
this.velocity = new THREE.Vector3();
this.acceleration = new THREE.Vector3(0, -150, 0);
this.ambientFriction = new THREE.Vector3(-10, 0, -10);
this.moveDirection = {
FORWARD: false,
BACKWARD: false,
