[HTML5] Modelo 3D-Erhang Código de implementación de implementación de rotación Cube Estereo Instancia

Recientemente, el juego del Cubo de Rubik de repente quería escribir un modelo de Miku con HMTL5.

Primero debe descargar HTML5 Open Source Library Lufylegend -.4.0

El cubo de Rubik se divide en 6 planos, cada uno de los cuales está compuesto por 9 rectángulos pequeños.

Debido a que ahora es un cubo de Rubik 3D, para dibujar cada rectángulo pequeño, debe conocer los 4 puntos fijos del rectángulo pequeño, y estos 4 puntos fijos se transformarán de acuerdo con el ángulo de rotación del espacio. Ángulo del cubo de Rubik alrededor del eje X y Z.

Por lo tanto, el establecimiento de la clase rectangular es el siguiente

 Función RECT (PointA, PointB, PointC, Pointd, Anglex, Anglez, Color) {Base (this, lsprite, []); )/4, (punto [1]+PointB [1]+PointC [1]+Pointd [1]/4, (PointA [2]+PointB [2]+PointC [2]+Pointd [2]/4 ]; .color = color;} rect.prototype.setange = function (a, b) {this.anglex = a;

PointA, PointB, PointC, PointD son los cuatro vértices de rectángulos pequeños.

El cubo de Rubik se divide en 6 planos, primero mire la parte delantera. abajo.

Por lo tanto, los nueve rectángulos pequeños en el lado anterior se pueden establecer mediante el siguiente código

 Para (var x = 0; x <3; x ++) {for (var y y = 0; y <3; y ++) {z = 3; 2*paso, -3*paso + y*2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -3*paso + y*2*paso, -3 *Paso + z*2*paso], [-step + x*2*paso, -step + y*2*paso, -3*paso + z*2*paso], [-3*paso + x*2 *Paso, - Paso + Y*2*Paso, -3*Paso + Z*2*Paso], 0,0,#FF0000);

Entre ellos, el backlayer es una clase de LSPRITE.

Se han establecido seis fideos.

Según la figura anterior, puede obtener las coordenadas de punto fijo después de transformar la siguiente 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, dibuje este rectángulo de acuerdo con las cuatro coordenadas de punto fijo del rectángulo pequeño,

 Rect.prototype.draw = function (layer) {this.graphics.clear (); , this.color);};};};

Entre ellos, DownEdices es un método de clase de lgraphics en la biblioteca Lufylegend.js.

Finalmente, se da el código completo y el código es muy pequeño.

 <! Type = text/javaScript src = ../lufylegend -.4.0.min.js> </script> <script type = text/javaScript src =./Main.js> </script> xt/javaScript src =./Rect .js> </script> </body> </html>

 Función RECT (PointA, PointB, PointC, Pointd, Anglex, Anglez, Color) {Base (this, lsprite, []); )/4, (punto [1]+PointB [1]+PointC [1]+Pointd [1]/4, (PointA [2]+PointB [2]+PointC [2]+Pointd [2]/4 ]; .Color = color;} rect.prototype.draw = function (layer) {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); ; .GNANGE) + W * MATH.COS (THE

 Init (50, Mylegend, 400,400, Main); .y = 120; -3*paso + x*2*paso, -3*paso + y*2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -3*paso + y *2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -step + y*2*paso, -3*paso + z*2*paso], [ - 3*Paso + X*2*Paso, -step + Y*2*Paso, -3*Paso + Z*2*Paso], 0,0,#FF4500); para (var x = 0; x <3; x ++) {for (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*paso, -3*paso + y*2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -3*paso + y* 2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -step + y*2*paso, -3*paso + z*2*paso], [-3 *Paso + x*2*paso, -step + y*2*paso, -3*paso + z*2*paso], 0,0,#ff0000); (var x = 0; x <3; x ++) {for (var z = 0; z <3; z ++) {y = 0; *Paso, -3*paso + y*2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -3*paso + y*2*paso, -3* Paso + Z*2*Paso], [ -Paso + X*2*Paso, -3*Paso + Y*2*Paso, -Step + Z*2*Paso], [-3*Paso + X*2* Paso, -3*Paso + Y*2*2*Paso, -Step + Z*2*Paso], 0,0,#ffffff); x <3; 3*paso + y*2*paso, -3*paso + z*2*paso], [-step + x*2*paso, -3*paso + y*2*paso, -3*paso + z* 2*paso], [-step + x*2*paso, -3*paso + y*2*paso, -step + z*2*paso], [-3*paso + x*2*paso, -3 *Paso + y*2*paso, -step + z*2*paso], 0,0,#ffff00); y ++) {for (var z = 0; z <3; z ++) {x = 0; 2*paso, -3*paso + z*2*paso], [-3*paso + x*2*paso, -3*paso + y*2*paso, -step + z*2*paso], [ -3*paso + x*2*paso, -step + y*2*paso, -paso + z*2*paso], [-3*paso + x*2*paso, -step + y*2*paso , -3*paso +z*2*paso], 0,0,#008000); (var z = 0; z <3; z ++) {x = 3; *Paso + z*2*paso], [-3*paso + x*2*paso, -3*paso + y*2*paso, -step + z*2*paso], [-3*paso + x *2*paso, -step + y*2*paso, -step + z*2*paso], [-3*paso + x*2*paso, -step + y*2*paso, -3*paso + Z*2*paso], 0,0,#0000ff); ; ChildList [Key] .Draw (Backlayer);}}

Este es solo un modelo 3D muy simple.