canvas - How to generate simple 3D images in JavaScript - Stack Overflow

admin管理员组

文章数量:1330909

I like to generate a simplified version of the following static image in pure JavaScript. It should work with 2010 vintage browsers, so I can't wait for Firefox 4 and WebGL.

I do not need any fancy textures - the task is just to visualise how to stack some boxes.

BTW: the current image is generated with POV-Ray which is overkill for the job - and does not run in the browser ;-)

I like to generate a simplified version of the following static image in pure JavaScript. It should work with 2010 vintage browsers, so I can't wait for Firefox 4 and WebGL.

I do not need any fancy textures - the task is just to visualise how to stack some boxes.

BTW: the current image is generated with POV-Ray which is overkill for the job - and does not run in the browser ;-)

• javascript
• canvas
• 3d
• rendering

Share Improve this question Follow edited Jan 25, 2011 at 16:02 Yi Jiang 50.2k1616 gold badges138138 silver badges136136 bronze badges asked Jan 25, 2011 at 15:59 maxmax 30k1212 gold badges5555 silver badges8282 bronze badges 8

• 3 does it have to be 3d or can't you just layer a bunch of images? – Caspar Kleijne Commented Jan 25, 2011 at 16:01
• Can't you generate the image on the server side? – Nicolas Repiquet Commented Jan 25, 2011 at 16:05
• Caspar Kleijne: Clever Idea but I would not know how to do it (with ever changing package sizes) – max Commented Jan 26, 2011 at 18:00
• Matt: I'm open to flash as long as I can drive it from javascipt. – max Commented Jan 26, 2011 at 18:01
• 1 tried zzz.dog ? – Alex Pappas Commented Feb 22, 2022 at 6:08

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 4

As you say you don't need fancy textures I'd remend for vintage support that you stack images like mentioned earlier. I made an example for you: http://jsfiddle/andersand/5RsEx/

The simple function is just to illustrate, and does the drawing of a segmented box. Of course you may need to figure out box placement, orientation, and so on if that is your business goal.

That approach could help you with boxes of various height (z axis). If your boxes also vary in width (x and/or y) you'd need to create more images to suit your needs.

If you can do without IE support, or require a plug-in for IE users, or provide server-side rasterization for IE users, you could use puted svg files.

You could do a very basic projection of the vertices of the boxes, maybe start with a simple isometric projection and then go to a perspective projection. Use simple 4x4 matrix math as used in OpenGL for this and represent the 3D coordinates as [x, y, z, w] vectors. Since the images are small and simple enough you can get away with simply using a smart rendering order, i.e. bottom to top, back to front, which will make sure you don't have to worry about mucking about with a depth buffer or other such things. Should be fairly simple to implement, you don't need third party libs and it will be natively supported in most of the contemporary browsers.

Okay, I thought this to be an interesting experiment, so I made a working version of what I described above. It works in all major browsers with the notable exception of IE. SVG support should e to IE with the introduction of IE9. I've tested in Opera, Firefox and Safari under OS X and Opera and Firefox under Linux. It might be possible to add IE support by making VML output possible, though I must say that I do not know whether IE permits inlining of VML in XHTML using namespaces like I used here.

Computed SVG rendering of 3D stacked boxes

Right now it only does isometric projection. I might just spend a bit more time on this to add a perspective projection option as well. That would seem fun and should not be much more than adding another matrix multiplication.

Searching for Collada (XML based 3d file) support may be your best bet. Now that canvas has landed, lots of 3d routines are being ported from Flash Actionscript to Javascript.

You can export Collada files from all of the major 3D applications, as well as blender ;)

Try the following as an example;

http://www.rozengain./blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/

If you want to rotate a 3D scene using javascript, you may have a few months wait until the engines get released. They will most likely be HTML5 dependent.

There are a few WebGL implementations doing the rounds but they are for the bleeding edge browsers and are very unstable.

本文标签： canvasHow to generate simple 3D images in JavaScriptStack Overflow