[HTML5] 3D-Modell-Erhang-Code-Implementierung Rotation Stereo Cube Instance

Vor kurzem wollte das Gameplay von Rubiks Würfel plötzlich ein Miku -Modell mit HMTL5 schreiben.

Zuerst müssen Sie HTML5 Open Source Library LufyLegend -.4.0 herunterladen

Der Rubik -Würfel ist in 6 Flugzeuge unterteilt, von denen jedes aus 9 kleinen Rechtecken besteht.

Da es sich jetzt um einen 3D -Rubik -Würfel handelt, müssen Sie die 4 Fixpunkte des kleinen Rechtecks ​​kennen, und diese 4 Fixpunkte werden gemäß dem Rotationswinkel des Raums transformiert. Winkel des Rubik -Würfels um die X- und Z -Achse.

Daher lautet die Einrichtung der rechteckigen Klasse wie folgt

 Funktion rect (pointa, pointb, pointC, pointd, Anglex, Anglez, Farbe) {Base (this, lsprite, []); )/4, (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4, (pointa [2]+pointb [2]+pointc [2]+pointd [2]/4 ]; .Color = color;} rect.prototype.setangle = function (a, b) {this.anglex = a;

Pointa, pointb, pointc, pointd sind die vier Eckpunkte kleiner Rechtecke.

Der Rubik's Cube ist in 6 Flugzeuge unterteilt. Schauen Sie sich zunächst die Vorderseite an. unten.

Daher können die neun kleinen Rechtecke auf der vorherigen Seite durch den folgenden Code festgelegt werden

 Für (var x = 0; x <3; x ++) {für (var y y = 0; y <3; y ++) {z = 3; 2*Schritt, -3*Schritt + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -3*Schritt + y*2*Schritt, -3 *Schritt + z*2*Schritt], [-Schance + x*2*Schritt, -Schange + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-3*Schritt + x*2 *Schritt, - Schritt + y*2*Schritt, -3*Schritt + z*2*Schritt], 0,0,#ff0000);

Unter ihnen ist der Backlyer eine LSPRITE -Klasse.

Sechs Nudeln wurden festgelegt.

Gemäß der obigen Abbildung können Sie die festen Koordinaten festlegen, nachdem Sie die folgende Formel transformiert haben

 Rect.Prototype.getPoint = Funktion (p) {var u2, v2, w2, u = p [0], v = p [1], w = p [2]; ) - v * math.sin (this.anglex); = w2; u2 = u; this.anglez) u = u2;

Zeichnen Sie schließlich dieses Rechteck gemäß den vier festen Punktkoordinaten des kleinen Rechtecks.

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

Unter ihnen ist Drawvertices eine Methode der LGRAPHICS -Klasse in der LufyleGend.js -Bibliothek.

Schließlich wird der vollständige Code angegeben und der Code ist sehr klein.

 <! 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>

 Funktion rect (pointa, pointb, pointC, pointd, Anglex, Anglez, Farbe) {Base (this, lsprite, []); )/4, (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4, (pointa [2]+pointb [2]+pointc [2]+pointd [2]/4 ]; .Color = color;} rect.Prototype.DRAW = Funktion (Layer) {this.graphics.clear (); GetPoint (this.pointc), this.getPoint (this.pointd)], this.color);}; this.getPoint (this.pointz) [2]; = u * math.cos (this.anglex) -v * math.sin (this.anglex); u = u2; .Annlez) + w * math.cos (this.anglez) u = u2;

 Init (50, MyLegend, 400.400, Main); .y = 120; // nach (var x = 0; x <3; x ++) {für (var y = 0; -3*Schritt + x*2*Schritt, -3*Schritt + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -3*Schritt + y *2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -Schance + y*2*Schritt, -3*Schritt + Z*2*Schritt], [ - 3*Schritt + x*2*Schritt, -Schange + y*2*Schritt, -3*Schritt + z*2*Schritt], 0,0,#ff4500); für (var x = 0; x <3; x ++) {für (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*Schritt, -3*Schritt + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -3*Schritt + y* 2*Schritt, -3*Schritt + z*2*Schritt], [-Schance + x*2*Schritt, -Schance + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-3), [-3), [-3 *Schritt + x*2*Schritt, -step + y*2*Schritt, -3*Schritt + z*2*Schritt], 0,0,#ff0000); (var x = 0; x <3; x ++) {für (var z = 0; z <3; z ++) {y = 0; *Schritt, -3*Schritt + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -3*Schritt + y*2*Schritt, -3* Schritt + z*2*Schritt], [ -Schritt + x*2*Schritt, -3*Schritt + y*2*Schritt, -Schange + Z*2*Schritt], [-3*Schritt + x*2* Schritt, -3*Schritt + y*2*2*Schritt, -step + z*2*Schritt], 0,0,#ffffff); x <3; 3*Schritt + y*2*Schritt, -3*Schritt + Z*2*Schritt], [-Schance + x*2*Schritt, -3*Schritt + y*2*Schritt, -3*Schritt + Z* 2*STEP], [-Schance + x*2*Schritt, -3*Schritt + y*2*Schritt, -step + z*2*Schritt], [-3*Schritt + x*2*Schritt, -3 *Schritt + y*2*Schritt, -step + z*2*Schritt], 0,0,#ffff00); y ++) {für (var z = 0; z <3; z ++) {x = 0; 2*Schritt, -3*Schritt + Z*2*Schritt], [-3*Schritt + x*2*Schritt, -3*Schritt + y*2*Schritt, -Schange + Z*2*Schritt], [ -3*Schritt + x*2*Schritt, -Schange + y*2*Schritt, -Schritt + Z*2*Schritt], [-3*Schritt + x*2*Schritt, -Schange + y*2*Schritt , -3*Schritt +z*2*Schritt], 0,0,#008000); (var z = 0; z <3; z ++) {x = 3; *Schritt + z*2*Schritt], [-3*Schritt + x*2*Schritt, -3*Schritt + y*2*Schritt, -Schange + Z*2*Schritt], [-3*Schritt + x *2*Schritt, -step + y*2*Schritt, -step + z*2*Schritt], [-3*Schritt + x*2*Schritt, -Schange + y*2*Schritt, -3*Schritt + Z*2*STEP], 0,0,#0000ff); ; Childlist [Key] .Draw (Backlayer);}}

Dies ist nur ein sehr einfaches 3D -Modell.