Game Development Reference
In-Depth Information
The image used in this example is available in the Three.js package at
examples/
textures/planets/land_ocean_ice_cloud_2048.jpg
.
There are a number of other options for different kinds of materials that are too
complex to address in the space we have. You can read more about them in the
documentation for the different materials. For example, the
MeshPhongMaterial
documentation (
http://threejs.org/docs/#Reference/Materials/
MeshPhongMaterial
) includes notes on producing reflective surfaces.
A city scene
We've covered a lot of ground with the Three.js API. Let's tie it all together with a
project that uses what we've learned about geometry and materials.
So far, we've been working with a single object in our world. If we wanted to move
it around, we'd have to change its
position
vector. We could create a full scene
this way by adding multiple objects and manually positioning them. However, for
worlds with more than a few objects, this can quickly get quite tedious. There are
several alternatives:
•
Rectangular layout
: This method involves storing a map in some simple
format such as a string or an image, where each character or pixel color
represents a type of object
•
Procedural generation
: This method involves the use of an algorithm to
position objects semi-randomly
•
Editor
: This method involves the use of an external tool to construct the
scene, followed by exporting the result (for example, in JSON format), and
importing it when the application executes
The rectangular format is the easiest for simple game levels, and we'll be using
it in
Chapter 3
,
Exploring and Interacting
.
Chapter 5
,
Design and Development
discusses the editor approach in detail. For now, let's try procedurally creating a
city, based on an example created by
Ricardo Cabello
(the original Three.js author)
at
http://www.mrdoob.com/lab/javascript/webgl/city/01/
.
First, let's create a cube and material that we'll use as the basis for our city
buildings. We'll copy our geometry and material for each new building and
scale the geometry appropriately:
var geo = new THREE.CubeGeometry(1, 1, 1);
geo.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
var material = new THREE.MeshDepthMaterial({overdraw: true});
