如何在 JavaScript 中生成简单的 3D 图像
我喜欢用纯 JavaScript 生成以下静态图像的简化版本。它应该可以与 2010 年的老式浏览器一起使用，所以我迫不及待地想要 Firefox 4 和 WebGL。
我不需要任何花哨的纹理 - 任务只是想象如何堆叠一些盒子。
顺便说一句：当前图像是使用 POV-Ray 生成的，这对于这项工作来说是多余的 - 并且不会在浏览器;-)
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 ;-)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
正如你所说，你不需要花哨的纹理，我建议你像前面提到的那样堆叠图像来获得复古支持。我为你做了一个例子： http://jsfiddle.net/andersand/5RsEx/
简单的功能只是为了说明，画了一个分段的盒子。当然，如果这是您的业务目标，您可能需要弄清楚盒子的位置、方向等。
这种方法可以帮助您处理不同高度（z 轴）的盒子。如果您的盒子的宽度（x 和/或 y）也有所不同，您需要创建更多图像来满足您的需求。
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.
如果您不需要 IE 支持，或者需要 IE 用户的插件，或者为 IE 用户提供服务器端光栅化，则可以使用计算的 svg 文件。
您可以对盒子的顶点进行非常基本的投影，也许从简单的等角投影开始，然后进行透视投影。为此，使用 OpenGL 中使用的简单 4x4 矩阵数学，并将 3D 坐标表示为 [x, y, z, w] 向量。由于图像足够小且简单，您可以简单地使用智能渲染顺序，即从下到上，从后到前，这将确保您不必担心深度缓冲区或其他类似的问题事物。实现起来应该相当简单，您不需要第三方库，并且大多数当代浏览器都原生支持它。
好吧，我认为这是一个有趣的实验，所以我做了一个上面描述的工作版本。它适用于所有主要浏览器，但 IE 除外。随着 IE9 的推出，IE 也应该支持 SVG。我在 OS X 下的 Opera、Firefox 和 Safari 以及 Linux 下的 Opera 和 Firefox 中进行了测试。或许可以通过使 VML 输出成为可能来添加 IE 支持，但我必须说，我不知道 IE 是否允许使用我在这里使用的名称空间在 XHTML 中内联 VML。
3D 堆叠框的计算 SVG 渲染
现在它只进行等角投影。我可能会花更多的时间来添加透视投影选项。这看起来很有趣，而且应该不会比添加另一个矩阵乘法多多少。
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, 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 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.
搜索 Collada（基于 XML 的 3d 文件）支持可能是您的最佳选择。现在画布已经登陆，许多 3D 例程正在从 Flash Actionscript 移植到 Javascript。
您可以从所有主要 3D 应用程序以及搅拌机中导出 Collada 文件；）
请尝试以下示例；
http://www.rozengain.com/blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/
如果您想使用 JavaScript 旋转 3D 场景，您可能需要等待几个月才能发布引擎。他们很可能依赖 HTML5。
有一些 WebGL 实现正在流行，但它们适用于前沿浏览器并且非常不稳定。
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.