The 3D user experience includes the freedom to roam anywhere and look in all directions. Instead of the left and right arrow keys allowing us to move along the x axis, users in 3D environments prefer to navigate anywhere, including rotate left and right around the y axis.
To enable us to turn in any direction, we added a new cameraRotation variable initialized to 0. Our new code responding to the arrow keys allows us to rotate around the y axis to look left and right:
function handleKeys() {
if (currentlyPressedKeys[38]) { // up arrow, camera forward
eye[0] += Math.sin( cameraRotation ) * .1;
eye[2] -= Math.cos( cameraRotation ) * .1;
}
else if (currentlyPressedKeys[40]) { // down arrow, cam. back
eye[0] -= Math.sin( cameraRotation ) * .1;
eye[2] += Math.cos( cameraRotation ) * .1;
}
else if (currentlyPressedKeys[37]) {
// left arrow, camera looks left
cameraRotation -= .008;
}
else if (currentlyPressedKeys[39]) {
...