当前位置:Gxlcms > html代码 > 【HTML5】3D模型--百行代码实现旋转立体魔方实例

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

时间:2021-07-01 10:21:17 帮助过:30人阅读

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

下面是预览画面。



制作流程

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

魔方分为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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>3D魔方</title>
  6. </head>
  7. <body>
  8. <p id="mylegend">loading……</p>
  9. <script type="text/javascript" src="../lufylegend-1.4.0.min.js"></script>
  10. <script type="text/javascript" src="./Main.js"></script>
  11. <script type="text/javascript" src="./Rect.js"></script>
  12. </body>
  13. </html>



二,Rect类



三,Main.js



以上就是【HTML5】3D模型--百行代码实现旋转立体魔方实例 的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行