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]) { ...