[HTML5] 3D Modelo-Erhang Implementation Rotation Rotation Stéreo Cube Instância

Recentemente, a jogabilidade do Cube de Rubik de repente queria escrever um modelo de Miku com o HMTL5.

Primeiro, você precisa baixar a biblioteca de código aberto HTML5 LUFYLEGEND -.4.0

O cubo de Rubik é dividido em 6 planos, cada um dos quais é composto por 9 pequenos retângulos.

Como agora é um cubo de Rubik em 3D, para desenhar cada pequeno retângulo, você precisa conhecer os 4 pontos fixos do retângulo pequeno, e esses 4 pontos fixos serão transformados de acordo com o ângulo de rotação do espaço. ângulo do cubo de Rubik ao redor do eixo x e z.

Portanto, o estabelecimento da classe retangular é o seguinte

 Function ret (Pointe, Pointb, Pointc, Pointd, Anglex, Anglez, Color) {Base (this, LSPRITE, []); )/4, (Pointe [1]+Pointb [1]+Pointc [1]+Pointd [1]/4, (Pointe [2]+Pointb [2]+Pointc [2]+Pointd [2 2]/4 ]; .color = color;} ret.prototype.setangle = função (a, b) {this.anglex = a;

Pointe, Pointb, Pointc, Pointd são os quatro vértices de pequenos retângulos.

O cubo de Rubik é dividido em 6 aviões, primeiro olhe para a frente. abaixo.

Portanto, os nove pequenos retângulos do lado anterior podem ser estabelecidos pelo seguinte código

 For (var x = 0; x <3; x ++) {for (var y y = 0; y <3; y ++) {z = 3; 2*etapa, -3*etapa + y*2*etapa, -3*etapa + z*2*etapa], [-Step + x*2*etapa, -3*etapa + y*2*etapa, -3 *Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*Etapa], [-3*Etapa + X*2 *Etapa, - Etapa + Y*2*Etapa -3*Etapa + Z*2*Etapa], 0,0,#FF0000);

Entre eles, a Backlayer é uma classe LSPRITE.

Seis macarrão foram estabelecidos.

De acordo com a figura acima, você pode obter as coordenadas de ponto fixo depois de transformar a seguinte fórmula

 Rect.prototype.getPoint = function (p) {var u2, v2, w2, u = p [0], v = p [1], w = p [2]; ) - V * Math.sin (this.Anglex); = w2; this.anglez);

Finalmente, desenhe este retângulo de acordo com as quatro coordenadas de ponto fixo do pequeno retângulo,

 Rect.prototype.draw = função (camada) {this.graphics.clear (); , this.color);};};};

Entre eles, o Drawvertices é um método de classe Lgraphics na biblioteca Lufylegend.js.

Finalmente, o código completo é fornecido e o código é muito pequeno.

 <! Type = text/javascript src = ../LUFYLEGEND -.4.0.min.js> </script> <script type = text/javascript src =./Main.js> </sCript> xt/javascript src =. .js> </cript> </body> </html>

 Function ret (Pointe, Pointb, Pointc, Pointd, Anglex, Anglez, Color) {Base (this, LSPRITE, []); )/4, (Pointe [1]+Pointb [1]+Pointc [1]+Pointd [1]/4, (Pointe [2]+Pointb [2]+Pointc [2]+Pointd [2 2]/4 ]; .Color = color;} rect.prototype.draw = function (camada) {this.graphics.clear (); getPoint (this.pointc), this.getPoint (this.pointd)], true, this.color);}; this.getPoint (this.pointz) [2]; = u * math.cos (this.anglex) -v * math.sin (this.anglex); u = u2; .

 Init (50, Mylegend, 400.400, principal); .y = 120; -3*etapa + x*2*etapa, -3*etapa + y*2*etapa, -3*etapa + z*2*etapa], [-Step + x*2*etapa, -3*etapa + y *2*Etapa, -3*Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*Etapa], [ - 3*Etapa + x*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*Etapa], 0,0,#ff4500); for (var x = 0; x <3; x ++) {for (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*Etapa, -3*Etapa + y*2*Etapa, -3*Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -3*Etapa + y* 2*Etapa, -3*Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*Etapa], [-3 *Etapa + X*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*Etapa], 0,0,#FF0000); (var x = 0; x <3; x ++) {for (var z = 0; z <3; z ++) {y = 0; *Etapa, -3*Etapa + y*2*Etapa, -3*Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -3*Etapa + y*2*Etapa, -3* Etapa + Z*2*Etapa], [ -Etapa + X*2*Etapa, -3*Etapa + Y*2*Etapa, -Step + Z*2*Etapa], [-3*Etapa + X*2* Etapa, -3*Etapa + y*2*2*Etapa, -Step + Z*2*Etapa], 0,0,#fffff); x <3; x ++) {para (var zar z = 0; z <3; z ++) {y = 3; 3*Etapa + y*2*Etapa, -3*Etapa + Z*2*Etapa], [-Step + X*2*Etapa, -3*Etapa + y*2*Etapa, -3*Etapa + Z* 2*Etapa], [-Step + X*2*Etapa, -3*Etapa + y*2*Etapa, -Step + Z*2*Etapa], [-3*Etapa + X*2*Etapa, -3 *Etapa + y*2*Etapa, -Step + Z*2*Etapa], 0,0,#ffff00); y ++) {for (var z = 0; z <3; z ++) {x = 0; 2*etapa, -3*etapa + z*2*etapa], [-3*etapa + x*2*etapa, -3*etapa + y*2*etapa, -Step + z*2*etapa], [ -3*etapa + x*2*etapa, -STEP + y*2*etapa -etapa + z*2*etapa], [-3*etapa + x*2*etapa, -Step + y*2*etapa , -3*etapa +z*2*etapa], 0,0,#008000); (var z = 0; z <3; z ++) {x = 3; *Etapa + Z*2*Etapa], [-3*Etapa + X*2*Etapa, -3*Etapa + y*2*Etapa, -STEP + Z*2*Etapa], [-3*Etapa + X *2*Etapa, -Step + y*2*Etapa, -STEP + Z*2*Etapa], [-3*Etapa + X*2*Etapa, -Step + y*2*Etapa, -3*Etapa + Z*2*etapa], 0,0,#0000ff); Backlayer. ChildList [key] .Draw (Backlayer);}}

Este é apenas um modelo 3D muito simples.