时间:2021-07-01 10:21:17 帮助过:30人阅读
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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D魔方</title> </head> <body> <p id="mylegend">loading……</p> <script type="text/javascript" src="../lufylegend-1.4.0.min.js"></script> <script type="text/javascript" src="./Main.js"></script> <script type="text/javascript" src="./Rect.js"></script> </body> </html>
二,Rect类
三,Main.js
以上就是【HTML5】3D模型--百行代码实现旋转立体魔方实例 的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!