I am playing around in webgl and have built a simple gltf loader, that allows to move the main object around. I can orbit the object, but it only allows to view the front side. I can orbit the object, but it only allows to view the forward.

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). Currently, I can rotate the camera (orbit) the main object, but only on yaw.

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.

// saves camera options into c constaint
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();
// c.matrix is the camera transform matrix
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();
// model is the object to orbit around
vec3.add(vec, vec3.clone(model.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);