如何在JavaScript中生成简单的3D图像

Question

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 ;-)

Answer 1

As you say you don't need fancy textures I'd recommend for vintage support that you stack images like mentioned earlier. I made an example for you: http://jsfiddle.net/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.

Answer 2

您是否看过这些库，它们看起来很需要并且可能会完成您的工作： 很棒的JavaScript 3D库 ，但是看起来其中许多都需要WebGL。

Answer 3

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 computed 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, ie 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 come 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.

Answer 4

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.com/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.

Answer 5

Check out this demo and the src for inspiration:

http://www.nihilogic.dk/labs/canvas3dtexture_0.2/

Answer 6

对于Nissan Leaf网站，他们使用Raphaël