CODEWITHSUNDEEP
javascripthtmlmodel-view
dcd018
dcd018

Reputation: 41

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.

Upvotes: 1

Views: 20790

Answers (3)

Vij
Vij

Reputation: 78

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

Upvotes: 2

Galvion
Galvion

Reputation: 1371

Try jsc3d at : https://code.google.com/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...

Upvotes: 0

Nitzan Tomer
Nitzan Tomer

Reputation: 164129

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 compatible 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")

Upvotes: 1

Related Questions