基于HTML5三维图形样本的点线面绘制

本文主要介绍了该软件的组成，使用HTML5来绘制三维图形的示例，主要用在HTML5的画布api中，有需要的朋友可以参考一下。
玩了两、三个星期的帆布游戏，玩游戏的飞机也是这样，所以我开始折腾3D。

因为毕竟帆布画布仍然是平面的，3D有抽象的Z轴，然后把三维坐标转换为二维坐标，到画布上，然后通过旋转变换效果产生3d.3d通常是由点到线，由线到面。

{点}

有些话，在我读到3D标签云的帖子之前，其实很简单，虽然这个博客是关于3d标签云的div，但最终3D原理是一样的，是3D最简单的形式。每个标签都是一个点。你也可以直接看这个演示：
3dball
里面有五百个点对象。每个点物体根据z轴改变大小和透明度，均匀分布在球体上，形成一个点球。

{线}

如果你知道如何做，线很容易，只需连接点。它不会做演示，但它并不难，只是环移至，然后线，线出来。

{脸}

这个博客主要讨论它。
第一个演示它二话不说：
3D魔方

作为多维数据集，我使用三个对象：点对象、表面对象和多维数据集本身的对象：

以下是一个点的X，Y，Z的对象，是该点的三维坐标，并_get2d方法是将三维坐标到二维level.falllength是焦距。
xml代码将内容复制到剪贴板。
向量=函数（x，y，z）{
这个；
这个，y = y；
这个；
这个_get2d =函数（）{
VaR规模= falllength /（falllength +本。Z）；
var x = x *规模集中式交换+本；
var y =世纪+这Y *规模；
返回：x，y，y，y；
}
}
然后表面物体：

在属性页的脸，这是很容易理解的，脸是方形的，v1v2v3v4是在四峰，这个属性是非常重要的，是这一层次的代表是在外面或里面，这一定，所以当使用油画可以使脸的图片前将表面覆盖，在价值也容易理解，这是顶点的Z轴坐标的平均值，这实际上是Z轴的中心点坐标，颜色是这个表面的颜色。

xml代码将内容复制到剪贴板。
VaR的脸=功能（vector1，载体，Vector3，Vector4，颜色）{
this.v1 = vector1；
this.v2 =载体；
this.v3 = Vector3；
this.v4 = Vector4；
this.color =颜色；
this.zindex =（本。V1。Z +，V2。Z +，V3。Z +，V4。Z） / 4；
this.draw =函数（）{
Ctx.save（）；
Ctx.beginPath（）；
Ctx.moveTo（本。V1。_get2d（）。X，这个V1。_get2d（）。Y）；
Ctx.lineTo（本。V2。_get2d（）。X，这个V2。_get2d（）。Y）；
Ctx.lineTo（本。V3。_get2d（）。X，这个V3。_get2d（）。Y）；
Ctx.lineTo（本。V4。_get2d（）。X，这。V4。_get2d（）。Y）；
Ctx.closePath（）；
/ / ctx.fillstyle = RGBA（+ parseInt（数学。随机）（* 255）+
ctx.fillstyle = this.color；
Ctx.fill（）；
}
}
最后一个是立方体本身的对象。

因为立方体最后需要旋转，所以立方体对象不仅有表面的对象也是对象，和立方体的旋转会引起表面的旋转。长度是一个立方体的边长，_initvector初始化一个正方体每个顶点的_draw方法是所有点的形式，将面放入数组，那么相反的排序（即根据在良好的秩序，在表面的那种），请各面绘制方法。立方体了。
xml代码将内容复制到剪贴板。
var =函数（长度）{
This.length = length;
this.faces = { }；
this.vectors = { }；
}
cube.prototype = { {
_initvector：函数（）{
这个向量{ 0 } =新向量（-这个长度 2，-这个长度2，这个长度2）；
这个向量{ 1 } =新向量（-这个长度 2，这个长度2，这个长度2）；
这个向量{ 2 } =新向量（这个长度为2，这个长度为2，这个长度为2）；
这个向量{ 3 } =新向量（这个长度为2，这个长度为2，这个长度为2）；
这个向量{ 4 } =新向量（这个长度为2，这个长度为2，这个长度为2）；
这个向量{ 5 } =新向量（这个长度为2，这个长度为2，这个长度为2）；
这个向量{ 6 } =新向量（这个长度为2，这个长度为2，这个长度为2）；
这个向量{ 7 } =新向量（-这个长度 2，这个长度 2，这个长度2）；
}，
_draw：函数（）{
这面孔{ 0 } =新面孔（这个向量{ 0 }，{ 1 }这个载体，这个载体{ 3 }，这个向量{ 2 }，# 6C6 ）；
这面孔{ 1 } =新面孔（这个向量{ 2 }，{ 3 }这个载体，这个载体{ 5 }，这个向量{ 4 }，# 6cc ）；
这面孔{ 2 } =新面孔（这个向量{ 4 }，{ 5 }这个载体，这个载体{ 7 }，这个向量{ 6 }，# cc6 ）；
这面孔{ 3 } =新面孔（这个向量{ 6 }，{ 7 }这个载体，这个载体{ 1 }，这个向量{ 0 }，# c6c ）；
这面孔{ 4 } =新面孔（这个向量{ 1 }，{ 3 }这个载体，这个载体{ 5 }，这个向量{ 7 }，# 666 ）；
这面孔{ 5 } =新面孔（这个向量{ 0 }，{ 2 }这个载体，这个载体{ 4 }，这个向量{ 6 }，# CCC）；

This.faces.sort（功能（A，B）{
返回b.zindex - a.zindex；
}）；
this.faces.foreach（函数（）{（）
This.draw（）；
}）
}
}
立方体是做的，然后你可以移动它。根据鼠标位置改变立方体的旋转角度，rotatex和rotatey方法是允许所有点绕X轴和绕Y轴旋转。这是我在以前的帖子说的原则。如果你想知道更多，你可以去百度的三维变换的计算机图形学，X轴和Y轴的旋转矩阵是最简单的。当然，如果你有兴趣，你还可以搜索绕任意轴旋转的矩阵。这有点复杂。我想用它作为一个魔方，但有一些问题没有得到解决的时间。好吧，这是远。通过rotatex和rotatey两方法，每个点都可以在动画的周期从下一帧，重新获得。这样，旋转立方体是。

xml代码将内容复制到剪贴板。
如果（注册侦听器窗口）{
Window.addEventListener（MouseMove
var x = event.clientx - canvas.offsetleft -集中式交换；
var y = event.clienty - canvas.offsettop -世纪；
AngleY =××0.0001；
X = Y * 0.0001；
}）；
}
{其他
window.attachevent（onmousemove
var x = event.clientx - canvas.offsetleft -集中式交换；
var y = event.clienty - canvas.offsettop -世纪；
AngleY =××0.0001；
X = Y * 0.0001；
}）；
}
功能rotatex（载体）{
VaR cos = math.cos（X）；
VaR的罪= Math.sin（X）；
vectors.foreach（函数（）{（）
VaR Y1 =这。Y *因为这Z *罪；
VaR Z1 =这。Z *因为这Y *罪；
这Y Y1；
这Z = Z1；
}）；
}

功能rotatey（载体）{
math.cos（Angley）VAR cos =；
Math.sin（Angley）功罪=；
vectors.foreach（函数（）{（）
这就是这个问题；
VaR Z1 =这。Z *因为这个X *罪；
这个= x = X1；
这Z = Z1；
}）
}
立方体=新多维数据集（80）；
_initvector（）的立方体；
功能initanimate（）{
_draw（）的立方体；

动画（）；
}

函数动画（）{
ctx.clearrect（0,0，canvas.width，帆布，高度）

RotateY（立方体。向量）；
rotatex（立方体。向量）；
_draw（）的立方体；
如果（requestanimationframe 窗口）{
RequestAnimationFrame（动画）；
}
如果（webkitrequestanimationframe 窗口）{
WebkitRequestAnimationFrame（动画）；
}
如果（msrequestanimationframe 窗口）{
MsRequestAnimationFrame（动画）；
}
如果（mozrequestanimationframe 窗口）{
MozRequestAnimationFrame（动画）；
}
{其他
setTimeout（动画16）；
}
}
我不坚持所有的代码，demo可以通过控制台看到它，我没有引用任何其他的框架，我可以直接从拷贝中使用它。

在写入一个旋转立方体之后，也可以完成多个立方体的旋转。
邮票演示：面对：三维立方体2三维立方体线（这个纯粹的地面感觉没有表面凉爽）