How can I rotate around a scene in webgl on mousedrag (emulating a camera moving in position)

Question

Ok, so I read the last few hours, and I managed to get the mouse to drag the work along the x axis using the following matrix calculation, but no luck with the y axis: where newX = new mouse X coordinate previousX = coordinate of the X mouse on the last update position = mvMatrix camera position = model view matrix or “world matrix”

angle = 0.01*(newX-previousX); rM = mat4.create(); mat4.identity(rM); rM[0] = Math.cos(angle); rM[2] = Math.sin(angle); rM[8] = -Math.sin(angle); rM[10] = Math.cos(angle); mat4.multiplyVec3( rM, position, position ) 

* Please note that this uses the glMatrix library (http://code.google.com/p/glmatrix/)

And also in order to always stand in front of the position 0,0,0

 mat4.lookAt( position, vec3.create([0, 0, 0]), vec3.create([position[0], position[1]+1, position[2]]), mvMatrix ); 

I got the matrix from http://en.wikipedia.org/wiki/Rotation_matrix. I used the matrix under "main rotations" and Ry

I am sure that this was done before, any help would be appreciated.

Cheers, Josh

Answer 1

Take a look at my WebGL 11 lesson - it rotates an object in the world instead of a camera, but you just have to be able to switch the order in which you multiply newRotationMatrix and moonRotationMatrix to cancel this.

Answer 2

Assuming you need a free moving camera with the Z axis as vertical - every frame, you can do something like this:

  mat4.identity (viewMatrix);
     mat4.translate (viewMatrix, [x, y, z]);
     mat4.rotate (viewMatrix, degToRad (90-pitch), [-1, 0, 0]);
     mat4.rotate (viewMatrix, degToRad (yaw), [0, 0, 1]);
     mat4.multiply (viewMatrix, modelMatrix, modelViewMatrix); 

Where degToRad converts degrees to radians. Then pass modelViewMatrix and the projection matrix to the vertex shader, which can use:

  attribute vec3 aVertexPosition;
     uniform mat4 modelViewMatrix;
     uniform mat4 projectionMatrix;
     gl_Position = projectionMatrix * modelViewMatrix * vec4 (aVertexPosition, 1.0);