最近研究魔方的玩法,就突然想用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
这只是一个非常简陋的3D模型,多谢大家捧场。
分享到:
相关推荐
本篇文章主要介绍【HTML5】3D模型--百行代码实现旋转立体魔方实例,具有一定的参考价值,有需要的可以了解一下。
最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。下面是测试链接和预览画面。首先你需要下载html5开源库件lufylegend-1.4.0魔方分为6个面...
3D模型-桌子3D模型-桌子3D模型-桌子3D模型3D模型-桌子3D模型-桌子3D模型-桌子3D模型3D模型-桌子3D模型-桌子3D模型-桌子3D模型
最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。 下面是预览画面。 制作流程 首先你需要下载Html5开源库件lufylegend-1.4.0 魔方分为6...
一款很有意思的HTML5 3D魔方旋转拼图小游戏代码,支持键盘上下左右方向键与鼠标进行操作。
电子元器件3D模型-step
3D魔方--动态
炫彩魔方3D模型适用于雕塑模型设计
opengl-3D迷宫-C--实现-源代码.doc
魔方进行随机打乱,通过鼠标来操作3D魔方,并能对魔方复位时间进行记录,来挑战自己吧,看看你要多长时间html+css+js实现的3D魔方小游戏源代码 采用html+css+js,双击网页开始游戏,双击后3D魔方进行随机打乱,通过...
3d模型--古典建筑模型--附带贴图+模型
球形多图3d旋转,纯css3代码
利用HTML5实现3D魔方旋转拼图游戏代码.zip
3D旋转立体魔方flash动画素材 3D旋转立体魔方flash动画素材
3D模型-少儿编程scratch项目源代码文件案例素材.zip
非本人制作,该资源为网络所传,下载后出现的后果自负。 3d模型--女人美女模型 完美蒙皮 跑步 死亡
前端3D 三阶魔方游戏。使用的是纯JS打造。引用方法和引入JQ一样简单。在1.0版本上进行了代码的优化,以及逻辑上的更改,使之更加流畅。简单易懂。
3D 魔方 简单的3D模型 exe文件,按上下左右操作 主要是了解一下3D的一种实现方法
HTML5绘制3D魔方旋转动画,纯CSS3绘制。