最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。
下面是测试链接和预览画面。
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/Rubik/index.html
制作流程
首先你需要下载html5开源库件lufylegend-1.4.0
http://blog.csdn.net/lufy_legend/article/details/7644932
魔方分为6个面,每个面由9个小矩形组成,现在我把每个小矩形当做一个类封装起来,
因为现在建立的是一个3D魔方,所以要画出每个小矩形,需要知道小矩形的4个定点,而这4个定点会根据空间的旋转角度而变换,所以为了计算出这4个定点坐标,需要知道魔方绕x轴和z轴旋转的角度。
所以,建立矩形类如下
pointA,pointB,pointC,pointD是小矩形的四个顶点,angleX,angleZ分别是x轴和z轴旋转的角度,color是小矩形的颜色。魔方分为6个面,先看一下最前面的一面,如果以立方体的中心作为3D坐标系的中心,那么9个小矩形的各个定点所对应的坐标如下图所示
所以,前面这个面的9个小矩形可以由下面的代码来建立
其中backLayer是一个LSprite类,step是半个小矩形的长,同样的道理,可以也得到其他5个面。
6个面都建立了,在绘制这6个面之前,首先要根据旋转的角度来计算各个定点的坐标,看下面的图
根据上面的图,用下面的公式即可得到变换后的定点坐标
最后根据小矩形的四个定点坐标,来绘制这个矩形, 其中drawVertices是lufylegend.js库件中LGraphics类的一个方法,它可以根据传入的定点坐标数组来绘制一个多边形。最后,给出完整代码,代码很少,JS代码一共91行。
一,index.html
二,Rect类 三,Main.js