ホームページ > 記事 > ウェブフロントエンド > [HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例

[HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例

黄舟オリジナル: 2017-02-22 14:11:503639ブラウズ

最近ルービックキューブの遊び方を勉強していて、ふとHMTL5を使ってルービックキューブのモデルを書きたくなったので、今回はHTML5を使って簡単な3Dモデルを書いてみました。

以下はプレビュー画面です。

[HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例

制作プロセス
まず、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は小さな長方形の4つの頂点、angleX、angleZはそれぞれx軸とz軸の回転角度です。 color は小さな長方形の色です。

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

[HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例
したがって、前の表面上の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 つの面を描画する前に、まず回転角度に基づいて各固定点の座標を計算する必要があります。下の図を参照してください。

[HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例
上の図に従って、以下を使用します。式変換された固定小数点座標を取得します

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 は、次の LGraphics クラスのメソッドです。 lufylegend.js ライブラリ。渡された固定小数点座標の配列に基づいて多角形を描画します。

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

1、index.html

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>3D魔方</title>  
</head>  
<body>  
<p id="mylegend">loading……</p>  
<script type="text/javascript" src="../lufylegend-1.4.0.min.js"></script>   
<script type="text/javascript" src="./Main.js"></script>   
<script type="text/javascript" src="./Rect.js"></script>   
</body>  
</html>

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<3;x++){  
        for(var y=0;y<3;y++){  
            z = 0;  
            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,"#FF4500");  
            backLayer.addChild(rect);  
        }  
    }  
    //前  
    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);  
        }  
    }  
    //上  
    for(var x=0;x<3;x++){  
        for(var z=0;z<3;z++){  
            y = 0;  
            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,-3*step + y*2*step,-step + z*2*step],[-3*step + x*2*step,-3*step + y*2*step,-step + z*2*step],0,0,"#FFFFFF");  
            backLayer.addChild(rect);  
        }  
    }  
    //下  
    for(var x=0;x<3;x++){  
        for(var z=0;z<3;z++){  
            y = 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,-3*step + y*2*step,-step + z*2*step],[-3*step + x*2*step,-3*step + y*2*step,-step + z*2*step],0,0,"#FFFF00");  
            backLayer.addChild(rect);  
        }  
    }  
    //左  
    for(var y=0;y<3;y++){  
        for(var z=0;z<3;z++){  
            x = 0;  
            var rect = new Rect([-3*step + x*2*step,-3*step + y*2*step,-3*step + z*2*step],[-3*step + x*2*step,-3*step + y*2*step,-step + z*2*step],
            [-3*step + x*2*step,-step + y*2*step,-step + z*2*step],[-3*step + x*2*step,-step + y*2*step,-3*step + z*2*step],0,0,"#008000");  
            backLayer.addChild(rect);  
        }  
    }  
    //右  
    for(var y=0;y<3;y++){  
        for(var z=0;z<3;z++){  
            x = 3;  
            var rect = new Rect([-3*step + x*2*step,-3*step + y*2*step,-3*step + z*2*step],[-3*step + x*2*step,-3*step + y*2*step,-step + z*2*step],
            [-3*step + x*2*step,-step + y*2*step,-step + z*2*step],[-3*step + x*2*step,-step + y*2*step,-3*step + z*2*step],0,0,"#0000FF");  
            backLayer.addChild(rect);  
        }  
    }  
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
}  
function onframe(){  
    a += 0.1 , b += 0.1;  
    backLayer.childList = backLayer.childList.sort(function(a,b){return a.z - b.z;});  
    for(key in backLayer.childList){  
        backLayer.childList[key].setAngle(a,b);  
        backLayer.childList[key].draw(backLayer);  
   }  
}

上記は【HTML5】です] 3D モデル - 回転する 3 次元ルービックキューブの例を実装するための 100 行のコードのコンテンツその他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 のフォーム検証の 8 つの方法の詳細な紹介次の記事：HTML5 のフォーム検証の 8 つの方法の詳細な紹介

続きを見る

[HTML5] 3Dモデル -- 回転する3次元ルービックキューブを100行のコードで実装する例

関連記事