3D models on HTML page [closed]

F

16

15

I have 3D CAD model that I want to show on a web page. I'd like to show it in a form like a <img> tag (e.g. inline with everything else rather than as a separate page) and I want the visitor to be able to rotate the model to view it from different perspectives.

What options do I have?

Things I'm thinking of/looking at

VRML
3DXML
flash
PDF has something that works but it doesn't embed like I want
3DMLW (Seems very slow)
Universal 3D (supported by Adobe Reader)

Edit: The model is not very complex so perf is not a major concern.

Flounder answered 27/2, 2009 at 20:58 Comment(0)

M

7

Chrome Experiments has released several 3D Javascript applications. Here's an example: Colors Cube

Mablemabry answered 19/3, 2009 at 15:8 Comment(2)

OMG that is just sweet!! – Flounder 19/3, 2009 at 16:15

Is there are non-JS way to do this? Is there a plan for such a thing in HTML5? – Norfolk 7/8, 2014 at 11:54

T

4

Papervison3D is a 3D flash library which might be worth a look. I haven't had the opportunity to play with it myself, but some of the demos look good.

Talkathon answered 27/2, 2009 at 21:48 Comment(0)

L

3

Papervision and Unity3D are the best choices for the pipeline in and quick loading. Flash is installed on most machined but you need to export as COLLADA format and there is a limit of 2000 polys before it bogs down.

Unity 3D has a great pipeline and is free for the indie now. It supports very high poly counts and the plugin installs without a browser restart and is around 4MB (Flash and Sliverlight are both over 4MB now).

Another option might be Torque 3D but that is also very game based. I think your best option is Unity 3D. You can export as FBX and have it on the web in about 5 minutes.

In the future you could use O3D from Google or WebGL but it is not ready for primetime. The only capable simple pipeline to get 3d on the web currently with decent poly counts is Unity3D. It works on PC and Mac just like Flash and Silverlight.

Luganda answered 12/11, 2009 at 23:58 Comment(1)

I would go with unity 3d, Very powerful – Transcaucasia 22/3, 2020 at 14:32

C

2

I am not sure how good flash is at 3d support for things like CAD app file formats. IIRC, flash cannot do hardware accelerated 3D graphics. On the other hand, a Java applet can (with the right library).

Culmiferous answered 27/2, 2009 at 21:2 Comment(1)

I'd rather stick with javascript of flash (no rational reason, just my opinion) – Flounder 27/2, 2009 at 21:8

I

2

A new tool called Sketch Fab came out a few month ago. It's designed entirely in HTML5 and seems very powerful.

Incommensurable answered 17/5, 2013 at 13:14 Comment(0)

U

1

You could also look at the <canvas> tag, which is being implemented by more browsers. There is probably already a JavaScript library for model viewing.

Ugric answered 27/2, 2009 at 21:25 Comment(0)

M

1

Consider QuickTime VR. It allows for much of what you ask and since you have the original, you can create a fairly accurate model.

Mortality answered 27/2, 2009 at 21:27 Comment(0)

S

1

VRML might be a good choice. There's a good client available from Parallel Graphics that I've used for quite a while now. I've got some VRML models on my website (though the content is quite trivial!). The models will load quite quickly, especially if they're not that large. There are several navigation modes available and you can lock it to "examine" which lets the user rotate the model (though in fact it's the camera that's moving around the object).

You will need to find a program that can write VRML files, though any decent modeller will have that option.

Summerlin answered 27/2, 2009 at 22:39 Comment(0)

S

1

Unity: http://unity3d.com

Sacred answered 1/3, 2009 at 12:23 Comment(1)

Seems to be targeted at games (so it would be a bit heavier) and needs a uncommon plug-in. – Flounder 1/3, 2009 at 17:58

P

1

Have a look at http://labs.autodesk.com/technologies/freewheel/

Project FreeWheel can show 2D and 3D models made in Autocad, Invertor or Revit. I think it uses DWF or something.

At this point it's not possible to host FreeWheel on your own server, but you can upload a DWF to Autodesk and show your model in an IFrame.

Poston answered 2/3, 2009 at 8:4 Comment(3)

Aside from the no host bit (And in reading I think that has or will change) this is spot on. Vote++ If I can find how to host it you'll get the checkmark – Flounder 2/3, 2009 at 17:10

I think you have to place the DWF on your own server and pass it to freewheel.autodesk.com/dwf.aspx?path=??? thru an IFrame. Check freewheel.autodesk.com/developers.aspx. There's an explanation here about how to configure. – Poston 2/3, 2009 at 18:23

This is nice. All platforms support it. However I am disappointed with the panning, zooming and rotating controls which are not neat enough. In addition the pinch zoom is not supported in touch screen devices. – Mientao 18/8, 2013 at 9:2

B

1

Seems like canvas tag based javascript drawing apis are picking up. See this recently released canvas 3d js library, even though it works only in FF 3.5: http://www.c3dl.org/

Beginner answered 13/11, 2009 at 0:10 Comment(0)

W

1

Autodesk is coming out with their new viewer api:

http://through-the-interface.typepad.com/through_the_interface/webtech/

Weatherbeaten answered 9/6, 2014 at 20:48 Comment(1)

More: github.com/ADN-DevTech/A360ViewerSamples – Weatherbeaten 10/6, 2014 at 20:0

C

0

Shockwave with some scripting code for the user being able to rotate the model.

Celestial answered 28/2, 2009 at 0:5 Comment(0)

I

0

Here's a JavaScript 3D rendering engine: pre3d.

If you haven't checked it out, Mr. Doob has a library for 3D graphics and modeling: homepage and git repo for three.js.

Illconditioned answered 27/9, 2010 at 17:56 Comment(1)

thanks for the edit bluish – Illconditioned 18/10, 2013 at 11:12

Y

0

You could use A3dsViewer - provides export to HTML5(three.js) or you can do directly export to the Google Drive and get the generated <iframe> url for the yours page. Exported HTML5 models contains by default included rotation functionality.

Yellow answered 7/2, 2014 at 1:36 Comment(0)

O

0

You can create html file of you 3D model using this plugins. It will generate single html file and you will able to use it any where in your website or you can send it to client as well

Ophiology answered 31/12, 2015 at 4:4 Comment(0)

Recommended topics

Hot tags