# How to turn a 3d camera (in HTML5 2D Canvas)

A few years back I started experimenting with 3d in canvas. Everything went pretty well untill I had to to turn the camera, I couldn't get it done.

A few days back I just happened to stumble upon that project again and noticed I got pretty far with it, sure, the code was a mess... so I cleaned it up a little and started fixing the camera rotation... And... I still have no clue how to do it. I tried google but so far nothing worked, I just have no idea what I'm doing....

Can somebody help me with this?

The code is located here: http://johandam.com/etc/3d

The relevant pieces are (probably) located here:

http://johandam.com/etc/3d/js/obj.js < General 'entity' class, here the 3d world coordinates are translated to 2d screen coordinates, it used to adjust it's position based on the camera's rotation but then distance-checking got all messed up so I moved it to the camera class, which I think makes more sense anyway.

http://johandam.com/etc/3d/js/camera.js < the camera object. A lot of movement code and at the end I try to adjust the camera based on it's rotation.

The idea is to have a target point around which the camera rotates but I'm pretty sure that somewhere a long the line I mixed a couple of different methods in it and I have no idea what I'm doing...

Who can help me out here?

-
This would be so much easier with matrices. But keeping what you already have, I think the trick is in the order in wich you apply the transformations. The correct order should be: rotate by the model angles, translate by the model position, translate by the negative camera position, i.e subtract instead of adding, and rotate by the negative camera angles. This should mimic the same order that would take place when applying a world matrix followed by a view matrix. – David Gouveia May 14 '12 at 12:00
I have no trouble switching to metrices, the current code I don't understand anyway, so trowing it away in favour of something simpler is fine. – Johan May 14 '12 at 12:09
Then, if it's any help, take a look at this answer, and in particular to the example code. The sample I posted there also has a camera implemented using a view matrix, although it's not being used in the demo. – David Gouveia May 14 '12 at 12:28
The way it works is that each object gets a matrix (i.e. world matrix) and the camera also gets a matrix (i.e. view matrix). You can think of a matrix as a black box that encapsulates a series of calculations, such as translations and rotations. Then the transformation process is just a matter combining the world and view matrices into one (matrix-matrix multiplication), and applying this combined matrix to each vertex in your polygons (matrix-vector multiplication). – David Gouveia May 14 '12 at 12:40
I thought you said it was simpler... :P Oh well, I'm going to give it a shot. Will report back later :) – Johan May 14 '12 at 12:43