3D Game Programming

Notice that we didn’t create a new cover for the hand. Instead we reused the same cover, which we named cover when we used it fo ...

Figure 2—Avatar with Hands 3.3 Breaking It Down Let’s take a quick look at why we used those numbers for the hands. If you’re im ...

But why 150? The answer is that the radius of the body is 100 and the radius of the hand is 50. We need to move the hand 100 + 5 ...

You’ll have to move them down. The up/down positioning is done with the Y direction instead of the X direction. This is the sec ...

varcover =newTHREE.MeshNormalMaterial(); varbody =newTHREE.SphereGeometry(100); varavatar =newTHREE.Mesh(body, cover); scene.add ...

worry about arms and legs to connect the hands and feet to the body—that would make it harder in later chapters. And, of course, ...

If you look back up to the right hand, you’ll see that we added it to the scene. We’ll change that line. varright_hand =newTHREE ...

Make Our Avatar Flip! Now that you have the avatar cartwheeling, try to make the avatar flip, as well. You should use a value li ...

CHAPTER 4 Project: Moving Avatars In Chapter 3, Project: Making an Avatar, on page 25, we covered how to build a game avatar. An ...

Figure 3—Selecting Make a Copy Figure 4—Naming the Project 4.2 Building Interactive Systems with Keyboard Events So far in this ...

// Listen for keypress events document.addEventListener('keydown',function(event) { alert(event.keyCode); }); This adds an event ...

So let’s make this happen. Remove the alert(event.keyCode) line inside the docu- ment.addEventListener(). Replace it with the fo ...

Let’s see what happens if one of the legs is not attached to the avatar. In this case, we’ll change the left_foot so that it’s a ...

if(is_flipping) { avatar.rotation.x = avatar.rotation.x + 0.05; } renderer.render(scene, camera); } animate(); Here is the compl ...

functionmakeTreeAt(x, z) { vartrunk =newTHREE.Mesh( newTHREE.CylinderGeometry(50, 50, 200), newTHREE.MeshBasicMaterial({color: 0 ...

do all of the repetitive work of building the trunk and treetop in the function named makeTreeAt(). We could have named it anyth ...

And then you would have to repeat the same thing three more times to make a total of four trees. Four trees would be a lot of ty ...

height with position.y. The camera is always right in front since we haven’t yet set the left-right position with position.x. It ...

Figure 5—Everything Starts Spinning! Figure 6—The Camera Spinning with the Avatar We’ll add an avatar position marker to the gam ...

But, more importantly, when the avatar does cartwheels, the camera doesn’t move. The avatar is cartwheeling, but the marker does ...