Rendering a Skybox without 3d libraries

Question

So... I have some sets of 6 pictures, like these http://www.humus.name/index.php?page=Textures , and I basically want to render them on an html5 canvas like this: http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=5&subindex=4&aid=303 But I'd rather not use any 3d library such as webgl or three.js, since that's the only 3d-related feature I need and I want the whole thing to be as lightweight as possible. I thought, "c'mon, it's just a rotating cube, can't be that hard!" WRONG. My original planwas to keep the camera position fixed, ant then to keep track of the x and y offset (in radians) of each vertex, and then to project them on my canvas and to deform the context accordingly to render each face of the cube. That approach doesn't seem to work, tho, so... can someone give me a pseudocode algorithm?

Answer 1

I think a good way to tackle this problem is to use CSS3 3d transformations. There's quite a few turorials to be found on the web giving details on how to build a 3d cube with CSS. Instead of using <div>s to build the cube's sides, you could use <img> or even <canvas> elements. By playing around with perspective attributes you should be able to place the 'camera' inside the cube looking out.