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

标签 javascript canvas 3d rendering

我喜欢用纯 JavaScript 生成以下静态图像的简化版本。它应该适用于 2010 年的老式浏览器,所以我等不及 Firefox 4 和 WebGL 了。

我不需要任何花哨的纹理 - 任务只是可视化如何堆叠一些盒子。

Packing Order

顺便说一句:当前图像是用 POV-Ray 生成的,这对这项工作来说太过分了——而且不能在浏览器中运行;-)

最佳答案

正如您所说,您不需要花哨的纹理,我建议您像前面提到的那样堆叠图像以获得复古支持。我为你做了一个例子:http://jsfiddle.net/andersand/5RsEx/

简单的功能只是为了说明,绘制一个分段的盒子。当然,如果这是您的业务目标,您可能需要弄清楚盒子的放置、方向等。

这种方法可以帮助您处理各种高度(z 轴)的盒子。如果您的盒子的宽度(x 和/或 y)也不同,您需要创建更多图像以满足您的需要。

关于javascript - 如何在 JavaScript 中生成简单的 3D 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4795716/

相关文章:

javascript - 从 php 和 css 语句中隐藏具有值/输出的 div

javascript - 获取JSON对象并读取数据

javascript - 使用 toBlob 下载 Canvas 图像

ios - 将图像转换为 SceneKit 节点

ios - 你知道如何使用 ARKIT 旋转 3D 模型以面对相机吗?

javascript - 如何访问 JSON 中的数组并在 Jade 中迭代

javascript - 我的 Node 脚本在函数完成后挂起

javascript - Canvas 全屏 100% 导致模糊

javascript - 移动剪裁的 Canvas

javascript - 如何使用 html5/js 渲染带有兴趣点的 3D map