在研究魔方的方式，最近，我突然想写一个hmtl5魔方模型。因为多维数据集是三维的立方体，所以这次我尝试用HTML5编写一个简单的3D模型。

这里是预览图。


生产过程

首先，你需要下载HTML5的开源库lufylegend-1.4.0

魔方分为6个面，每个边由9个小矩形组成，现在我把每个小矩形封装成一个类。

因为现在是建立一个三维立方体，所以要画出每一个小矩形，你需要知道4个小的矩形，而4个将根据旋转角度和空间变换来指定，所以为了计算4点坐标，需要知道立方体围绕x轴和z轴的旋转角度。

因此，设置矩形如下所示

函数rect（指出，pointb，pointc，性，X，anglez，颜色）{
基地（这个，lsprite，{ }）；
这个积分= {（点{ 0 } + pointb { 0 } + pointc { 0 } +了{ 0 }） / 4，（作{ 1 } + pointb { 1 } { 1 } + + pointc了{ 1 }） / 4，（作{ 2 } + pointb { 2 } + pointc { 2 } +了{ 2 }） / 4 }；
这个Z =这。博恩茨{ 2 }；
这个观点=指出，这个pointb = pointb，这个pointc = pointc，这。了= X = X了，这个，这个。anglez = anglez，这颜色＝颜色；
}

rect.prototype.setangle =功能（A，B）{
this.anglex =一；
this.anglez = B；
这this.getpoint。Z =（这个点）{ 2 }；
}；



指出，pointb，pointc，D点是一个小矩形，X的四个顶点，anglez是X轴和Z轴的角度和色彩是一个小的矩形的颜色。

魔方分为6个面。先看前面。如果立方体的中心是三维坐标系的中心，下面9个小矩形对应的坐标如下所示。


因此，前面的9个小矩形可以用下面的代码构建

对于（var x＝0；x＜3；x + +）{
对于（var = 0；y＜3；y + +）{
z＝3；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{步+××2×步，3步+ Y×2×步，3 *步+ Z×2×步}，{步+××2×步，步+ Y * 2 * 3 *一步一步，Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，3 * + Z×2×步}，0,0，# FF0000）；
backlayer.addchild（矩形）；
}
}


烟气是一lsprite类，步半个小矩形的长度，同样的原因，也可以得到其他5面。

6张脸都装好了。在绘制这6个曲面之前，首先要根据旋转角度计算每个点的坐标，并看下图。


根据上面的图表，定点坐标可以用下面的公式得到

rect.prototype.getpoint =功能（P）{
VaR U2，V2，W2，U = P { 0 }，V = P { 1 }，W = p { 2 }；
U2 = U * Math.cos（这个X）－Math.sin（这个X）；
V2 = U * Math.sin（这个X）+ V * Math.cos（这个X）；
W2 = W；
U = U2；v = v2；W = W2；
U2；
V2 = V * Math.cos（这。anglez）- W * Math.sin（这。anglez）；
W2 = V * Math.sin（这。anglez）+ W×math.cos（这个。anglez）；
U = U2；v = v2；W = W2；
返回{ U2，V2，W2 }；
}；


最后，根据小矩形的四个定点坐标绘制矩形。

rect.prototype.draw =功能（层）{
This.graphics.clear（）；
this.graphics.drawvertices（1，# 000000
}；



drawvertices是在lufylegend.js库的图形类的方法，可以绘制多边形基于传入的定点固定坐标点阵列。

最后给出了完整的代码，代码非常少，js代码是91行。

一、index.html





3D魔方


Loadinghellip；hellip；








二，Rect类

函数rect（指出，pointb，pointc，性，X，anglez，颜色）{
基地（这个，lsprite，{ }）；
这个积分= {（点{ 0 } + pointb { 0 } + pointc { 0 } +了{ 0 }） / 4，（作{ 1 } + pointb { 1 } { 1 } + + pointc了{ 1 }） / 4，（作{ 2 } + pointb { 2 } + pointc { 2 } +了{ 2 }） / 4 }；
这个Z =这。博恩茨{ 2 }；
这个观点=指出，这个pointb = pointb，这个pointc = pointc，这。了= X = X了，这个，这个。anglez = anglez，这颜色＝颜色；
}
rect.prototype.draw =功能（层）{
This.graphics.clear（）；
this.graphics.drawvertices（1，# 000000
}；
rect.prototype.setangle =功能（A，B）{
this.anglex =一；
this.anglez = B；
这this.getpoint。Z =（这个点）{ 2 }；
}；
rect.prototype.getpoint =功能（P）{
VaR U2，V2，W2，U = P { 0 }，V = P { 1 }，W = p { 2 }；
U2 = U * Math.cos（这个X）－Math.sin（这个X）；
V2 = U * Math.sin（这个X）+ V * Math.cos（这个X）；
W2 = W；
U = U2；v = v2；W = W2；
U2；
V2 = V * Math.cos（这。anglez）- W * Math.sin（这。anglez）；
W2 = V * Math.sin（这。anglez）+ W×math.cos（这个。anglez）；
U = U2；v = v2；W = W2；
返回{ U2，V2，W2 }；
}；



三、Main.js

init（50，mylegend
var a = 0，B = 0，烟气，步= 20，关键= null；
函数main（）{
烟气=新lsprite（）；
addChild（烟气）；
烟气。x = 120，y = 120的烟气；

对于（var x＝0；x＜3；x + +）{
对于（var = 0；y＜3；y + +）{
z＝0；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{步+××2×步，3步+ Y×2×步，3 *步+ Z×2×步}，{步+××2×步，步+ Y * 2 * 3 *一步一步，Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，3 * + Z×2×步}，0,0，# ff4500）；
backlayer.addchild（矩形）；
}
}

对于（var x＝0；x＜3；x + +）{
对于（var = 0；y＜3；y + +）{
z＝3；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{步+××2×步，3步+ Y×2×步，3 *步+ Z×2×步}，{步+××2×步，步+ Y * 2 * 3 *一步一步，Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，3 * + Z×2×步}，0,0，# FF0000）；
backlayer.addchild（矩形）；
}
}

对于（var x＝0；x＜3；x + +）{
对于（z = 0；z < 3；z + +）{
y＝0；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{步+××2×步，3步+ Y×2×步，3 *步+ Z×2×步}，{步+××2×步，3步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，3步+ Y×2×步，步+ Z×2×步}，0,0，# ffffff）；
backlayer.addchild（矩形）；
}
}
下/
对于（var x＝0；x＜3；x + +）{
对于（z = 0；z < 3；z + +）{
y＝3；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{步+××2×步，3步+ Y×2×步，3 *步+ Z×2×步}，{步+××2×步，3步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，3步+ Y×2×步，步+ Z×2×步}，0,0，# ffff00）；
backlayer.addchild（矩形）；
}
}
左/左
对于（var = 0；y＜3；y + +）{
对于（z = 0；z < 3；z + +）{
x＝0；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{ - 3 *步+××2×步，3步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，3 * + Z×2×步}，0,0，# 008000）；
backlayer.addchild（矩形）；
}
}
对/对
对于（var = 0；y＜3；y + +）{
对于（z = 0；z < 3；z + +）{
x＝3；
VaR的新矩形（矩形= { - 3 *步+××2×步，3步+ Y * 2 * 3 *一步一步，Z×2×步}，{ - 3 *步+××2×步，3步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，步+ Z×2×步}，{ - 3 *步+××2×步，步+ Y×2×步，3 * + Z×2×步}，0,0，# 0000ff）；
backlayer.addchild（矩形）；
}
}
BackLayer.addEventListener（levent.enter_frame，框架）；
}
功能框架（）{
a＝0.1，b＝0.1；
backlayer.childlist = backlayer.childlist.sort（功能（A，B）{ return a z B Z；}）；
（重点为烟气。childlist）{
烟气。childlist {key} setangle（A，B）；
烟气。childlist {key}画（烟气）；
}
}




这只是一个非常简单的3D模型，希望对大家有所帮助，希望大家多多支持。