I have a simple concept that I want to use HTML5 for, but I'm a total newbie when it es 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.

I have a simple concept that I want to use HTML5 for, but I'm a total newbie when it es 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.

• javascript
• html
• model-view

• 1 check out three.js – user578895 Commented May 3, 2012 at 17:11
• Perfect, this is exactly what I need, maybe someone could shed some light on how to load a JSON model with three.js? Thanks! – dcd018 Commented May 3, 2012 at 17:24

3 Answers 3

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./articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/

check out the source of this example - http://mrdoob.github./three.js/examples/canvas_materials_reflection.html

CSS 3 won't help you with that, sounds like you'll need to use WebGL which is a "JavaScript API for rendering interactive 3D graphics within any patible web browser without the use of plug-ins"

Try the wikipedia article and the official site (there's also the "test if your browser supports WebGL site")

Try jsc3d at : https://code.google./p/jsc3d/

Quoted : ..JSC3D is built on pure Javascript software rendering using 2d canvas technology as well as an optional WebGL back-end that provides more efficient rendering...