Using JavaScript to model 3D polyhedra

Question

Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.

I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?

Answer 1

Take a look at this library: SVG-VML-3D

It uses SVG and falls back to VML on MSIE. They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.

Answer 2

Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.

There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.

Answer 3

Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.