当前位置: 老葡京网站娱乐 > 网页设计 > HTML 5教程 > 正文

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

时间:2014-03-16 lufy

老葡京网站娱乐 www.sdguanhua.com 最近研究魔方的玩法,就突然想用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轴旋转的角度。

所以,建立矩形类如下

function Rect

(pointA,pointB,pointC,pointD,angleX,angleZ,color){  
    base(this,LSprite,[]);  
    this.pointZ=[(pointA[0]+pointB[0]+pointC[0]+pointD[0])/4,(pointA[1]+pointB[1]+pointC

[1]+pointD[1])/4,(pointA[2]+pointB[2]+pointC[2]+pointD[2])/4];  
    this.z = this.pointZ[2];  
    

this.pointA=pointA,this.pointB=pointB,this.pointC=pointC,this.pointD=pointD,this.angleX=ang

leX,this.angleZ=angleZ,this.color=color;  
}  
      
Rect.prototype.setAngle = function(a,b){  
    this.angleX = a;  
    this.angleZ = b;  
    this.z=this.getPoint(this.pointZ)[2];  
};

pointA,pointB,pointC,pointD是小矩形的四个顶点,angleX,angleZ分别是x轴和z轴旋转的 角度,color是小矩形的颜色。

魔方分为6个面,先看一下最前面的一面,如果以立方体的中心 作为3D坐标系的中心,那么9个小矩形的各个定点所对应的坐标如下图所示