H5实现扭转立体魔方-

发布时间：08/01 来源：未知浏览：关键词：

?这次给大家带来H5实现扭转立体魔方，H5实现扭转立体魔方的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来H5实现扭转立体魔方，H5实现扭转立体魔方的注意事项是什么，下面就是实战案例，一起来看一下。

下面是预览画面。

制作流程

第一你需要下载Html5开源库件lufylegend-1.4.0

魔方分为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=angleX,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个小矩形的各个定点所对应的坐标如下图所示

所以，前面这个面的9个小矩形可以由下面的代码来创立

for(var x=0;x<3;x++){  
    for(var y=0;y<3;y++){  
        z = 3;  
        var rect = new Rect([-3*step + x*2*step,-3*step + y*2*step,-3*step + z*2*step],[-step + x*2*step,-3*step + y*2*step,-3*step + z*2*step],[-step + x*2*step,-step + y*2*step,-3*step + z*2*step],[-3*step + x*2*step,-step + y*2*step,-3*step + z*2*step],0,0,"#FF0000");  
        backLayer.addChild(rect);  
    }  
}

其中backLayer是一个LSprite类，step是半个小矩形的长，一样的原理，可以也得到其他5个面。

6个面都创立了，在绘制这6个面以前，第一要依据扭转的角度来盘算各个定点的坐标，看下面的图

依据上面的图，用下面的公式即可得到变换后的定点坐标

Rect.prototype.getPoint = function(p){  
    var u2,v2,w2,u=p[0],v=p[1],w=p[2];  
    u2 = u * Math.cos(this.angleX) - v * Math.sin(this.angleX);  
    v2 = u * Math.sin(this.angleX) + v * Math.cos(this.angleX);  
    w2 = w;  
    u = u2; v = v2; w = w2;  
    u2 = u;  
    v2 = v * Math.cos(this.angleZ) - w * Math.sin(this.angleZ);  
    w2 = v * Math.sin(this.angleZ) + w * Math.cos(this.angleZ);  
    u = u2; v = v2; w = w2;  
    return [u2,v2,w2];  
};

最后依据小矩形的四个定点坐标，来绘制这个矩形，

Rect.prototype.draw = function(layer){  
    this.graphics.clear();  
    this.graphics.drawVertices(1,"#000000",[this.getPoint(this.pointA),this.getPoint(this.pointB),this.getPoint(this.pointC),this.getPoint(this.pointD)],true,this.color);  
};

其中drawVertices是lufylegend.js库件中LGraphics类的一个办法，它可以依据传入的定点坐标数组来绘制一个多边形。

最后，给出完备代码，代码很少，JS代码一共91行。

一，index.html

3D魔方

loading……

打赏