To access my reference material, please go to http://jsfiddle.net/fYtwf/
Overview
I am working on a basic 3D simulation using three.js where the camera is surrounded by cubes in three dimensions. These cubes serve as a visual guide to where the camera is pointing until the view controls are implemented and tested. The goal is to create a simple 3D application where the camera movement is controlled using the up, down, left, and right keys, similar to moving one's head.
Challenges
Currently, in my simulation, when the camera is facing forward and then tilted upwards, everything works as expected. However, when the camera is turned 90 degrees to the left and the up arrow key is pressed, unexpected behavior occurs. The camera increments the x-axis, but due to the change in direction, modifying the x-axis alone is incorrect.
It seems that trigonometry is needed to calculate the correct values for the z-axis in such scenarios. Unfortunately, my trigonometry skills are not very strong.
Current State
To better understand the issue, please visit my jsfiddle: http://jsfiddle.net/fYtwf/
UP key increments X only
DOWN key decrements X only
LEFT key increments Y only
RIGHT key decrements Y only
Q key increments Z only
W key decrements Z only
(Q and W were added in an attempt to assist in understanding the issue.)
As per my current understanding, pressing the UP key should increment X and modify the Z axis based on the current Y axis. However, I lack the algorithm to achieve this.
Therefore, both X and Z should be adjusted in the KEYUP code (I believe, but open to corrections).
// setRotateX, getRotateX, setRotateY, and getRotateY are custom camera functions
// created to manage degrees. It is not mandatory to use them, but they aided me in the process
switch(key) {
case KEYUP:
if (camera.getRotateX() < 90) { // Limit to avoid overhead view
camera.setRotateX(camera.getRotateX() + VIEW_INCREMENT);
}
break;
case KEYDOWN:
if (camera.getRotateX() > -90) { // Ensure camera doesn't point below
camera.setRotateX(camera.getRotateX() - VIEW_INCREMENT);
}
break;
case KEYLEFT:
camera.setRotateY(camera.getRotateY() + VIEW_INCREMENT);
break;
case KEYRIGHT:
camera.setRotateY(camera.getRotateY() - VIEW_INCREMENT);
break;
}