最近研究魔方的玩法,就突然想用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){