Game Development Reference
In-Depth Information
startAnimating();
}, function() {
stopAnimating();
});
}, function() {
instructions.className = 'exited';
stopAnimating();
});
}
});
The Pointer Lock and Full Screen APIs can only be engaged when users take an
action (clicking or hitting the keyboard) as a security precaution to prevent attackers
from hijacking your screen, so we're waiting for a click in this case. Once we're in full
screen, we can listen to the
mousemove
event to rotate the player:
document.addEventListener('mousemove', function(event) {
player.rotate(event.movementY, event.movementX, 0);
}, false);
The
event.movementX
property and the
event.movementY
property
are normalized across browsers here by the
PointerLock.js
library.
The
rotate()
method simply changes the player's
_aggregateRotation
vector. We're assuming here that the player has been instantiated, as shown
in the following code:
player = new Player();
player.add(camera);
scene.add(player);
Yes, we just added the
camera
to the
player
. It turns out that any object that is
a descendant of
THREE.Object3D
can have other objects added to it. Those child
objects are accessible through the parent's
children
array, and they will be grouped
together with the parent so that movement, rotation, and scaling are composed.
(In other words, if a child's local position is
(0, 0, 5)
and the parent's position is
(0, 0, 10)
, then the child's position in the world will be
(0, 0, 15)
. Rotation and
scale work similarly.) In this case, we use this composition to cause our camera to
follow our player around.
