views:

340

answers:

3

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?

A: 

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.

TokenMacGuy
Truth be told, I want to model polyhedra with "any" number of sides (up to, at least, 100). I'm new to 3D, so I was hoping there was a lib where I can just say, give me a polyhedra with 17 sides, please. :-)
Andrew Hedges
I've never seen anything like that. But there are only 5 platonic solids. For arbitrary polyhedra, you won't get anything so nice as a platonic solid. You could throw a certain number of points on a sphere and have them push each other around until they stabilized, I guess.
Nosredna
I'd settle for even numbers. The point is, I want to get polyhedra with however many sides the user requests. The SVG solution looks pretty solid.
Andrew Hedges
A: 

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.

Dave Rigby
That's intriguing. I've been experimenting a lot with 2D transforms lately (http://segdeha.com/experiments/css-transitions/). How could that be applied to building polyhedra with arbitrary numbers of sides?
Andrew Hedges
@Andrew: pass, I've not actually implemented anything with this yet, I just heard about it recently. It's possible you might have to start with squares and deform them to triangles (it looks like you have access to the raw transformation matrix so it should be possible).
Dave Rigby
I like this idea. Should be very lightweight to implement (possibly all CSS). If the SVG solution above proves cumbersome, I'll pursue this and blog it up.
Andrew Hedges
+2  A: 

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.

Andrew Y
This just might be the ticket. Thanks, Andrew!
Andrew Hedges