Load 3D model with HTML5 canvas element and Javascript
I have a simple concept that I want to use HTML5 for, but I'm a total newbie when it comes to canvas and model viewers written in Javascript. I have a 3D model of a desk lamp and I'd like only the head part of the lamp to rotate with mouse movement. This CSS3 box shadow effect is sort of what I mean, but I already have the 3D model drawn out in Maya that I'd like to load with HTML5 and use Javascript for cursor interaction. I only need the head part of the lamp to retain 3D attributes, I can use a png for the base. I hope this makes sense, I would normally just use flash, but I'd like to do this with HTML5 if possible.
Answer
I am new to webgl too, you can do it with three.js. If you are using Blender there is a converter script available which will convert the model to json file.
Then u can load the json file on canvas using json loader of three.js. I found these links useful to load json model. Hope it helps
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
check out the source of this example - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html