Apply 2D canvas (image + text) to 3D surface and do 360 degree rotation/animation - possible to do this with HTML5/CSS3/Javascript or Flash necessary?

Question

I'm contemplating (if it's possible or) how I would implement the following functionality in the browser:

I'm trying to design a web app that will allow the user to custom design (add images + text) to a 3D surface in the browser. The design can take place on a (2D) canvas/editor which will allow users can drag and drop images and add text, etc. Then, preferably in real-time, the design is transformed & applied to the 3D shape/surface. The user can preview by rotating the 3D surface.

It needs to work in iOS so Flash is out. Also would it be possible to avoid WebGL for this kind of application - would like the a wide browser coverage (IE8 would need to be supported with the relevant canvas shims).

Is there anything out there that already does this? Would it be possible to implement this exclusively in the client side (HTML5/Javascript)?

Answer 1

Check out http://www.c3dl.org/ for 3d js libraries

http://www.addyosmani.com/resources/googlebox/ for the image and text mapped to box,

And http://mugtug.com/sketchpad/ for an html5 editor

Answer 2

Yes this is definitely possibly. Look at Three.js and thingiview for examples and inspiration in how to do the 3d side of it. You should be able to design the editor using html5 canvas and then get an image version of it using the toDataUrl() method.