0
);
border.position.set(x, y, 0);
returnborder;
}This makes the same kinds of physics-ready meshes that we used in Chapter
15, Project: The Purple Fruit Monster Game, on page 133. Note that the depth
of the rectangular boxes is always 100. This will ensure that the avatar cannot
accidentally fall in front of or behind the borders.The makeBorder() function builds meshes. We still need to add these meshes to
the scene. Add the left, right, top, and bottom borders with the following four
lines (you don’t have to include all of the spaces if you don’t like them):scene.add(makeBorder(width/-2, 0, 50, height));
scene.add(makeBorder(width/2, 0, 50, height));
scene.add(makeBorder(0, height/2, width, 50));
scene.add(makeBorder(0, height/-2, width, 50));Adjust the Border for Perspective Cameras
If you’re using the perspective camera, then the borders won’t quite
reach the edge of the screen. To position them correctly, we have
to make the borders slightly bigger and move them a little further
out.To make the borders bigger, multiply the width and height by 1.2:
newTHREE.CubeGeometry(1.2*w, 1.2*h, 100),To move the border a little further out, multiply the x and y position
by 1.2 as well:border.position.set(1.2*x, 1.2*y, 0);With that, we have four borders to keep our avatar on the screen. Now let’s
add the avatar.Start with a Simple Avatar
We’ll keep the avatar simple in this game. Feel free to use some of the tech-
niques from Chapter 15, Project: The Purple Fruit Monster Game, on page 133,
or Chapter 12, Working with Lights and Materials, on page 109, after we’re
done, but it’s best to start simple and add complexity later. We’ve done most
of this before, so let’s go through the next code quickly.Make the avatar’s mesh a flat cylinder with a red cover:
Chapter 18. Project: Cave Puzzle • 168
Prepared exclusively for Michael Powell report erratum • discuss