H5は回転する立体ルービックキューブを実現

今回は回転する三次元ルービックキューブを実現するためのH5をお届けします。 回転する三次元ルービックキューブを実現するためのH5の注意点を紹介します。

以下はプレビュー画面です。ここで、それぞれの小さな四角形をクラスとしてカプセル化します 今構築しているのは 3D ルービック キューブなので、それぞれの小さな四角形を描画するには、小さな四角形の 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 は小さな長方形の 4 つの頂点、angleX、angleZ はそれぞれ x 軸と z 軸の回転角度、色小さな長方形の色です。

ルービックキューブは6つの面に分かれています。まず、立方体の中心を3D座標系の中心として使用すると、9つの小さな面の各固定点に対応する座標がわかります。長方形は以下の図に示すとおりです

したがって、前のサーフェスの9つの小さな長方形は、次のコードによって作成できます

for(var x=0;x

ここで、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];  
};

最後に、小さな長方形の 4 つの固定小数点座標に基づいて長方形を描画します

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 クラスのメソッドであり、受信した固定小数点座標

Array に基づいて多角形を描画します。

最後に、完全なコードを示します。コードは非常に少なく、合計 91 行の JS コードです。

1、index.html

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

2、Rectクラス

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

3、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<strong>このケースを読んだ後、あなたはメソッドをマスターしたと思います記事、詳細 php 中国語 Web サイトの他の関連記事にもご注目ください。 <span style="color:#ff0000"></span>推奨読書: </strong><p style="text-align: left;">spring mvc+localResizeIMG は H5 画像圧縮とアップロードを実装します<strong><span style="color:#ff0000"></span></strong></p>Canvas 描画 API の使用方法の詳細な説明<p style="text-align: left;"><span style="color:#ff0000"><strong></strong></span></p>

以上がH5は回転する立体ルービックキューブを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。