Javascript 3D table and tablecloth

Question

How would you do a mesh/plane (representing a tablecloth) that falls on top of a smaller cube (representing a restaurant table), so that when the tablecloth is in place its edges would hang and fold realistically over the table. It would be cool to animate this falling with physics and gravity so it would look really neat and real. I also would like to use a tileable texture (tablecloth pattern) for the tablecloth.

I am planning to make this with Three.js, but I guess any other javascript library or tool would be fine as well. At this point even a static render of the scenario would be a great starting point.

Any tips how to approach this? Thanks.

Answer 1

You lucked out -- it's practically done for you. :-)

http://mrdoob.github.com/three.js/examples/webgl_animation_cloth.html