Displaying a 3D model in JavaScript/HTML5

Question

I am looking at rendering a 3D model in a browser. What tools should I use/what places should I look at?

I don't know what data format the model will be, I can likely request that data to formatted in any way I want.

I am looking at three.js but it seems that it needs WebGL to work, which appears to be unsupported in IE.

Does a "cross-browser compatible HTML 3d rendering engine" exists? :)

Solution 1

I have not played with 3D yet, but I know a good place for ressources on 3D for HTML5.

http://www.html5rocks.com/en/gaming

And here is a tutorial on how to create your 3D models with the Three.js Framework.

http://www.html5rocks.com/en/tutorials/three/intro/

This may help you. Good luck.

Solution 2

I also needed what you've been searching for and did some research.

I found JSC3D (https://code.google.com/p/jsc3d/). It's a project written entirely in Javascript and uses the HTML canvas. It has been tested for Opera, Chrome, Firefox, Safari, IE9 and more.

Then you have services as p3d.in and Sketchfab that give you a nice reader to view 3D models on a web page: they use HTML5 and WebGL. They both have a free version.

Solution 3

a couple years down the road, I'd vote for three.js because

ie 11 supports webgl (to what extent I can't assure you since i'm usually in chrome)

and, as far as importing external models into three.js, here's a link to mrdoob's updated loaders (so many!)

UPDATE nov 2019: the THREE.js loaders are now far more and it makes little sense to post them all: just go to this link

http://threejs.org/examples and review the loaders - at least 20 of them

Solution 4

do you work with a 3d tool such as maya? for maya you can look at http://www.inka3d.com

View more solutions

Comments

[Goro]

Interesting. The 3D model is not in fact coming from a modeling software like Maya, but from a topographical scanner. Having said that, I can probably output the data into a format inka understands.

[bish]

Could you please provide sample code instead of posting a link

[user3325025]

it seems redundant to repost what mrdoob has for source code examples, no?

[Peter]

link goes to 404 now so I guess redundancy might have been a good thing