Exploring and Interacting - Game Development with Three.js - page 45

LEFT: false,
RIGHT: false
};
}
Player.prototype = Object.create(THREE.Mesh.prototype);
Player.prototype.constructor = Player;
We implemented Player as a child of the THREE.Mesh class by calling the Mesh
constructor from inside the Player constructor and copying over the prototype .
This means that players automatically have geometry, materials, position, rotation,
and scaling, and additionally we can implement our own features (such as velocity
and acceleration). Note that the player functions similar to a controller because it
contains code to move and look around, with the difference that the input event
handlers are bound outside the class in order to make it reusable.
One thing that may look strange here is changing the rotation.order . Rotation
is tracked using a Euler representation, which consists of angles in radians around
each axis in addition to the order in which the axial rotation should be applied. The
default order is 'XYZ' , which rotates up and down first (x), then left to right (y). In
this configuration, the world will appear to tilt if the player looks horizontally after
looking vertically. To visualize this, imagine tilting a donut so that the side away
from you is up and the side near you is down; that is x rotation, or pitch . If you
then move your finger around the donut from the front to the left, that is y rotation,
or yaw . (Tilting the donut to the right would be z rotation, or roll. ) Notice that if
you were looking out from the middle of the donut towards your finger, your head
would be tilted relative to the world. As a result, we have to change the Euler order
to 'YXZ' to make the camera rotate relative to the world instead of to itself. With this
change, we move our finger first, then tilt the donut so our finger goes up or down
instead of the front of the donut, and we end up with a level head.
To actually implement this looking around, we'll lock the mouse and track its
movement. We'll use libraries to make this easier since the APIs are a little wordy.
You can get PointerLock.js at https://github.com/IceCreamYou/PointerLock.
js and BigScreen from Brad Dougherty at https://github.com/bdougherty/
BigScreen . Once we have included these libraries, starting the game looks similar to
the following code, which requests the browser to enter full screen and pointer lock
mode before starting animation:
document.getElementById('start').addEventListener('click', function()
{
if (BigScreen.enabled) {
var instructions = this;
BigScreen.request(document.body, function() {
PL.requestPointerLock(document.body, function() {
instructions.className = 'hidden';