Game Development Reference
In-Depth Information
The second line from the previous code snippet moves the geometry's origin
(the point around which the geometry is scaled and rotated) to the bottom so that
when we scale up a building, all the buildings' floors will be at the same height. This
is done by shifting the y coordinate of every vertex and face 0.5 units up using a
matrix that represents a vertical translation.
Matrices can be thought of as rectangular arrays or tables with rows and
columns. A matrix with four rows and four columns is particularly useful
for storing information about objects in 3D space because a single 4 x 4
matrix can represent position, rotation, and scale. This is the only point in
this topic that will mention matrices, so it's okay if you don't understand
the underlying math; one of the reasons to use Three.js is to avoid having
to do linear algebra manually. The transformation we are doing in this
case is just one short way to move all the vertices and faces of a geometry
at once without moving its origin.
Next, we'll create all our buildings:
for (var i = 0; i < 300; i++) {
var building = new THREE.Mesh(geo.clone(), material.clone());
building.position.x = Math.floor(Math.random() * 200 - 100) * 4;
building.position.z = Math.floor(Math.random() * 200 - 100) * 4;
building.scale.x = Math.random() * 50 + 10;
building.scale.y = Math.random() * building.scale.x * 8 + 8;
building.scale.z = building.scale.x;
scene.add(building);
}
The only thing that's new here is the
clone()
method. Almost all Three.js objects can
be cloned to create a copy that can be modified without altering the original. We are
taking advantage of that to create new geometry and material instances based on our
original instances.
Let's position the camera in a place where it can get a better view:
camera.position.y = 400;
camera.position.z = 400;
camera.rotation.x = -45 * Math.PI / 180;
We've seen rotation a couple of times now, but it's important to recall that rotation
is measured in radians. The conversion we perform here tilts the camera 45 degrees
down. You can also use the convenient
lookAt
method. For example,
camera.
lookAt(new THREE.Vector3(0, 0, 0))
turns the camera to look at the default
scene origin.
