I am playing around in webgl and have build a simple gltf loader, that allows to move the main object around. It also allows to rotate the camera (orbit) the main object, but only on yaw. I can orbit the object, but it only allows to view the front side. Now I did fix that using rotation and multiplication, but I want to use the lookAt function, to make it more simple, and also to have pitch orbit (up-down). My camera class has the transform matrix and the projection matrix. I then make a view matrix and multiply it with the projection matrix, then save it in the transform matrix. But this only allows for yaw rotation. If I add pitch, then the camera does move up and down, but it doesn’t rotate to keep the object in center. I am thinking this could be done with the lookAt function, but how would I get the camera origin position, since it requires a vector, but I only have the main transform matrix. I do have transformation, rotation and scale vectors, but since I am multiplying matrixes, the remain 0.
Here is my code:
const c = this; let camX = Math.sin(c.yaw) * c.distance; //let camY = Math.cos(c.pitch) * c.distance; let camZ = Math.cos(c.yaw) * c.distance; var viewMatrix = mat4.create(); mat4.invert(viewMatrix, c.matrix); mat4.multiply(c.matrix, c.projection, viewMatrix); mat4.fromTranslation(c.matrix, vec3.fromValues(camX, 0, camZ)); const vec = vec3.create(); vec3.add(vec, vec3.clone(plane.translation), vec3.fromValues(camX, 0, camZ)); var moveMatrix = mat4.create(); mat4.fromTranslation(moveMatrix, vec); mat4.multiply(c.matrix, c.matrix, moveMatrix); var rotMatrix = mat4.create(); mat4.fromYRotation(rotMatrix, c.yaw); mat4.multiply(c.matrix, c.matrix, rotMatrix);
Matrix is the transform matrix.