3D graphics in a 2D context (for dummies)
April 17, 2012 5:39 PM Subscribe
HTML5 canvas question: I'm trying to model a 2D grid in 3D space and it's not working right. Can you help?
Please take a look at this page I made and uploaded to Pastebin
(the source is in there, you can save it locally to view it; it contains two embedded images).
I started with this cool demo from Koen Hendrix
, which renders sprites at certain points in 3D space. I added the ability to draw a line between any two points, and built a grid.
You can use the right/left arrow keys to rotate the model, which pivots around the blue dot. It works fine until you rotate past a certain spot, then the positions of some of the off-camera points start to skew. If you keep rotating they'll pull farther apart before snapping back into the proper positions.
I have never worked at the code level with a 3D graphical engine like this before... I'm learning a lot but I just can't wrap my head around what's going wrong here. I'm pretty rusty with my geometry and trigonometry. Can anybody more experienced please explain to me why the grid renders just fine from certain angles but not from others, and help me fix it?