最近、Rubikのキューブのゲームプレイは、Rubikのキューブが3Dキューブであるため、突然Mikuのモデルを書きたいと思っていました。
以下はプレビュー画面です。生産プロセスまず、HTML5オープンソースライブラリlufylegend -.4.0をダウンロードする必要があります
Rubik's Cubeは6つの飛行機に分かれており、それぞれが9つの小さな長方形で構成されています。
これは、各小さな長方形を描くために3Dルービックキューブであるため、小さな長方形の4つの固定点を知る必要があります。これらの4つの固定点は、スペースの回転角度に応じて変換されますx軸とz軸の周りのルービックキューブの角度。
したがって、長方形のクラスの確立は次のとおりです
function rect（pointa、pointb、pointc、pointd、anglex、anglez、color）{base（this、lsprite、[]）; ）/4、（pointa [1]+pointb [1]+pointc [1]+pointd [1]/4、（pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ] this.z = this.pointa = pointb、this.pointc、this.pointd、this.anglex = anglez、this .color = color;} rect.prototype.setangle = function（a、b）{this.anglec = a;Pointa、Pointb、Pointd、Pointdは、Anglezの4つの頂点です。
ルービックキューブは6つの平面に分割され、最初に正面を見てください。3D座標系の中心として使用されます。下に。
したがって、前の側の9つの小さな長方形は、次のコードで確立できます
for（var x = 0; x <3; x ++）{for（var y y = 0; y <3; y ++）{z = 3; 2*ステップ、-3*ステップ + Y*2*ステップ、-3*ステップ + Z*2*ステップ]、[-step + x*2*ステップ、-3*ステップ + y*2*ステップ、-3 *ステップ + Z*2*ステップ]、[-step + x*2*ステップ、-step + y*2*ステップ、-3*ステップ + Z*2*ステップ]、[-3*ステップ + X*2 *ステップ、ステップ + Y*2*ステップ、-3*ステップ + Z*2*ステップ]、0,0、＃ff0000）;その中で、バックレイヤーはLSPRITEクラスです。
これらの6つの平面を描く前に、6つの麺が確立されています
上記の図によると、次の式を変換した後、固定ポイント座標を取得できます。
rect.prototype.getpoint = function（p）{var u2、v2、w2、u = p [0]、v = p [1]、w = p [2]; ）v * sin（this.anglex）; = w2 = u; this.anglez）;最後に、小さな長方形の4つの固定ポイント座標に従って、この長方形を描画します。
rect.prototype.draw = function（layer）{this.graphics.clear（）; 、this.color）;};};};Drawverticesは、Lufylegend.jsライブラリのLgraphicsクラスの方法です。
最後に、完全なコードが与えられ、JSコードは非常に少ないです。
まず、index.html<！doctype html> <html> <gead> <meta charset = utf-8> <title> 3d rubik's cube </head> <body> <div = mylegend> </div> type = text/javascript src = ../lufylegend -.4.0.min.js> </script> <script> <script> <text/javascript src =。/main.js> </script> xt/javascript src =。/rect .js> </script> </body> </html>第二に、長いクラス
function rect（pointa、pointb、pointc、pointd、anglex、anglez、color）{base（this、lsprite、[]）; ）/4、（pointa [1]+pointb [1]+pointc [1]+pointd [1]/4、（pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ] this.z = this.pointa = pointb、this.pointc、this.pointd、this.anglex = anglez、this .color = color;} rect.prototype.draw = function（layer）{this.graphics.clear（）; getpoint（this.getpoint（this.pointd）、true、this.color）; this.getpoint（this.pointz）[2]; = u * math.cos（this.anglex）-v * math.sin（this.anglex）; ; u2 = w = u2 = u2; .Anglez）第三に、main.js init（Mylegend、400,400、main）; .y = 120; -3*ステップ + x*2*ステップ、-3*ステップ + y*2*ステップ、-3*ステップ + z*2*ステップ]、[-step + x*2*ステップ、-3*ステップ + y *2*ステップ、-3*ステップ + Z*2*ステップ]、[-step + x*2*ステップ、-step + y*2*ステップ、-3*ステップ + z*2*ステップ]、[ - 3*ステップ + x*2*ステップ + y*2*ステップ、-3*ステップ + z*2*ステップ、＃ff4500）; for（var x = 0; x <3; x ++）{for（var y y = 0; y <3; y ++）{z = 3; 2*2*2*2*ステップ、-3*ステップ + Y*2*ステップ、-3*ステップ + Z*2*ステップ]、[-step + x*2*ステップ、-3*ステップ + y* 2*ステップ、-3*ステップ + z*2*ステップ]、[-step + x*2*step、-step + y*2*step、-3*step + z*2*step]、[-3 *ステップ + x*2*ステップ + y*2*ステップ、-3*ステップ + z*2*ステップ、0,0、＃ff0000）; （var x = 0; x <3; x ++）{for（var z = 0; z <3; z ++）{y = 0; *ステップ、-3*ステップ + Y*2*ステップ、-3*ステップ + Z*2*ステップ]、[-step + x*2*ステップ、-3*ステップ + y*2*ステップ、-3*ステップ + Z*2*ステップ]、[ - ステップ + X*2*ステップ、-3*ステップ + Y*2*ステップ、-step + Z*2*ステップ]、[-3*ステップ + X*2*ステップ、-3*ステップ + y*2*ステップ、-step + z*2*ステップ]、0,0、＃fffffff）; x <3; 3*ステップ + Y*2*ステップ、-3*ステップ + Z*2*ステップ]、[-step + X*2*ステップ、-3*ステップ + Y*2*ステップ、-3*ステップ + Z* 2*step]、[-step + x*2*step、-3*step + y*2*step、-step + z*2*step]、[-3*step + x*2*step、-3 *ステップ + y*2*ステップ、-step + z*2*step]、0,0、＃fffff00）; y ++）{for（var z = 0; z <3; z ++）{x = 0; 2*ステップ、-3*ステップ + Z*2*ステップ]、[-3*ステップ + X*2*ステップ、-3*ステップ + Y*2*ステップ、-step + Z*2*ステップ]、[ -3*ステップ + x*2*ステップ、-step + y*2*ステップ、 - ステップ + z*2*ステップ]、[-3*ステップ + x*2*ステップ、-step + y*2*ステップ、-3*ステップ +Z*2*ステップ]、0,0、＃008000）; （var z = 0; z <3; z ++）{x = 3; *ステップ + Z*2*ステップ]、[-3*ステップ + X*2*ステップ、-3*ステップ + Y*2*ステップ、-step + Z*2*ステップ]、[-3*ステップ + X *2*ステップ、-step + y*2*ステップ、-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.childlist.sort（a、bz -bz;}）; ChildList [key] .draw（backlayer）;}}これは非常にシンプルな3Dモデルです。