H5 realizes rotating three-dimensional Rubik's cube

This time I will bring you H5 to realize the rotating three-dimensional Rubik's Cube. What are the precautions for H5 to realize the rotating three-dimensional Rubik's Cube. The following is a practical case, let's take a look.

The following is the preview screen.

##Production process

First you need to download

Html5Open source library lufylegend-1.4.0

The Rubik's Cube is divided into 6 faces, each face is composed of 9 small rectangles. Now I encapsulate each small rectangle as a class,

Because what is being built now is a 3D Rubik's Cube, so to draw each small rectangle, you need to know the 4 fixed points of the small rectangle, and these 4 fixed points will transform according to the rotation angle of the space, so in order to calculate these 4 For fixed-point coordinates, you need to know the angle of rotation of the Rubik's Cube around the x-axis and z-axis.

So, create a rectangle class as follows

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 are the four vertices of the small rectangle, angleX, angleZ are the angles of x-axis and z-axis rotation respectively, and color is The color of the small rectangle.

The Rubik's Cube is divided into 6 faces. Let's take a look at the front face first. If the center of the cube is used as the center of the 3D coordinate system, then the coordinates corresponding to each fixed point of the 9 small rectangles are as shown in the figure below

So, the 9 small rectangles on the previous surface can be created by the following code

for(var x=0;xwhere backLayer is an LSprite class, and step is half a small The length of the rectangle can also be obtained by the other five faces in the same way. <p style="text-align: left;"></p> Six faces have been established. Before drawing these six faces, the coordinates of each fixed point must first be calculated based on the angle of rotation. See the picture below<p style="text-align: left;"></p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/e7921dc8f02c5c503722db51614a7050-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p>According to the above figure, use the following formula to get the transformed fixed-point coordinates<p   style="max-width:90%"></p><pre class="brush:php;toolbar:false">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];  
};

Finally, draw the rectangle based on the four fixed-point coordinates of the small rectangle,

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);  
};

where drawVertices is a method of the LGraphics class in the lufylegend.js library, which can draw a polygon based on the incoming fixed-point coordinates

array.

Finally, the complete code is given. There is very little code and a total of 91 lines of JS code.

1, index.html

nbsp;html>  
  
  
<meta>  
<title>3D魔方</title>  
  
  
<p>loading……</p>  
<script></script>   
<script></script>   
<script></script>   
  

2, Rect class

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.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);  
};  
Rect.prototype.setAngle = function(a,b){  
    this.angleX = a;  
    this.angleZ = b;  
    this.z=this.getPoint(this.pointZ)[2];  
};  
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];  
};

Three, Main.js

init(50,"mylegend",400,400,main);  
var a = 0,b=0,backLayer,step = 20,key = null;  
function main(){  
    backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.x = 120,backLayer.y = 120;  
    //后  
    for(var x=0;x I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! <p></p>Recommended reading: <p></p><p style="text-align: left;">spring mvc+localResizeIMG implements H5 image compression and upload<a href="http://www.php.cn/html5-tutorial-390032.html" target="_blank"></a><br></p><p style="text-align: left;">Detailed explanation of canvas drawing api usage<a href="http://www.php.cn/html5-tutorial-390027.html" target="_blank"></a><br></p>

The above is the detailed content of H5 realizes rotating three-dimensional Rubik's cube. For more information, please follow other related articles on the PHP Chinese website!