HTML5 Canvas - 2d中的线框球体

Question

我想在2D Canvas中绘制3D线框球体。我不是一个数学忍者，所以我想知道是否有人知道一种简单的方法，使用lineto弧连接在Canvas中绘制一个并用它绘制：math：

我将不胜感激。

像这样：http://en.wikipedia.org/wiki/File:Sphere_wireframe_10deg_6r.svg

我希望这是一个简单的等式，但如果你知道它不是（即绘制那将是很多代码），我会很高兴知道我可能需要重新考虑我想要的东西做。

Answer 1

最简单的方法是查看SVG文件的来源（here）并使用canvas命令重新创建这些路径。

如果你想要一个投影到2d空间的实际3D球体，我建议使用像Three.js这样的库

您还可以查看我在这里完成的一些数学运算：swarms _3d和Matrix模块应该是您需要的全部。

Answer 2

这次SO对我没有帮助，所以我帮助自己，这里是：纯HTML5 + JavaScript可配置渲染或线框球体。

我从这个excellent post开始然后继续。基本上我从Qt3D收集了一些顶点生成代码并适用于JS。

我不是100％确定旋转功能是否正确，但如果您发现错误，欢迎您回复。

为了更清楚，我区分了Z位置，前面是白色，后面是灰色。

这是结果（16环×32片）和相关的jsFiddle link

Enjoy

Answer 3

看看这个：http://jsfiddle.net/aJMBp/

你应该绘制很多这些线来创建一个完整的球体。这是一个很好的起点，给我5分钟，我会看看我是否可以改进它来画一个球体。

变得更好： http://jsfiddle.net/aJMBp/1/

好的，那就是我的能力。但是，这里还有一点改进：http://jsfiddle.net/aJMBp/2/