html5 3d 魔方旋转,【HTML5】3D模型--百行代码实现旋转立体魔方

最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。

下面是测试链接和预览画面。

http://www.doczj.com/doc/7051a7d8b4daa58da1114a6f.html/demo/Rubik/index.html

制作流程

首先你需要下载html5开源库件lufylegend-1.4.0

http://www.doczj.com/doc/7051a7d8b4daa58da1114a6f.html/lufy_legend/article/details/7644932

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

因为现在建立的是一个3D魔方，所以要画出每个小矩形，需要知道小矩形的4个定点，而这4个定点会根据空间的旋转角度而变换，所以为了计算出这4个定点坐标，需要知道魔方绕x轴和z轴旋转的角度。

所以，建立矩形类如下

[javascript]view plain copy

1.function Rect(pointA,pointB,pointC,pointD,angleX,angleZ,color){