# 3D Camera Problem

I allow the user to look around the scene by holding down the left mouse button and moving the mouse. The problem that I have is I can be facing one direction, I move the mouse up and the view tilts up, I move down and the view tilts down. If I spin around 180 my left and right still works fine, but when I move the mouse up the view tilts down, and when I move the mouse down the view tilts up.

This is the code I am using, can anyone see what the problem with the logic is?

``````  var viewDir = g_math.subVector(target, g_eye);
var rotatedViewDir = [];
rotatedViewDir[0] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[0]) - (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[2]);
rotatedViewDir[1] = viewDir[1];
rotatedViewDir[2] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[2]) + (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[0]);
viewDir = rotatedViewDir;
rotatedViewDir[0] = viewDir[0];
rotatedViewDir[1] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]) - (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]);
rotatedViewDir[2] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]) + (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]);
g_lookingDir = rotatedViewDir;
``````
-
What language is this? In most languages, when you set viewDir = rotatedViewDir, then change rotatedViewDir, you are changing viewDir as well, and g_lookingDir is equal to viewDir. – Chewy Gumball Dec 29 '10 at 19:17
It's JavaScript - I'm using the O3D WebGL wrapper. I have tried changing the code in various ways, creating seperate variables as you advised, either the logic changes and it starts acting weird, or it functions the same way. Either my javascript isnt up to scratch, or the algorithm isn't perfect? – Chris Dec 29 '10 at 20:52
For example I tried swapping { viewDir = rotatedViewDir; } with { viewDir[0] = rotatedViewDir[0]; viewDir[1] = rotatedViewDir[1]; viewDir[2] = rotatedViewDir[2]; } – Chris Jan 1 '11 at 18:35
I figure if I can determine which way around the camera is facing I can just apply a hack to { rotatedViewDir[1] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]) - (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]); } so that the first part is added to the second part instead of subtracted. – Chris Jan 1 '11 at 18:42
Did it solve the problem? Isnt the problem in that that you are performing Y rotation and than X rotation? Did you try to do it in one step? I mean do not use rotation around X,Y but use Yaw Pitch Roll rotation matrix? I'm pretty sure that that is the problem – Notabene Jan 1 '11 at 22:18

3D cameras are simpler to implement using Quaternions, in my opinion.

Take a look at the sample code for the "Simple Scene Viewer":

In particular, the drag handler:

``````var rotationQuat = g_aball.drag([e.x, e.y]);
var rot_mat = g_quaternions.quaternionToRotation(rotationQuat);
g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat);
``````

All you need to do with Quaternions is perform a simple matrix multiplication.

-
Why cant I use the <code> tag in comments grrrr – Chris Jan 9 '11 at 20:21
I have tried to apply this method using the following code but my camera just ends up pointing to space, any idea where I am going wrong? – Chris Jan 9 '11 at 20:22
var rotationQuat = g_aball.drag([e.x, e.y]);<br> var rot_mat = g_quaternions.quaternionToRotation(rotationQuat); g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat); var cameraRotationMatrix4 = g_math.matrix4.lookAt(g_eye, g_target, [g_up[0], g_up[1] * -1, g_up[2]]); var cameraRotation = g_math.matrix4.setUpper3x3(cameraRotationMatrix4,g_thisRot); g_target = g_math.addVector(cameraRotation, g_target); – Chris Jan 9 '11 at 20:23