[HTML5] Instance stéréo-cube de rotation de la mise en œuvre du code Modèle 3D Model-Erhang

Récemment, le gameplay de Rubik's Cube a soudainement voulu écrire un modèle de Miku avec HMTL5.

Vous devez d'abord télécharger la bibliothèque open source html5 lufylegend -.4.0

Le cube de Rubik est divisé en 6 plans, chacun composé de 9 petits rectangles.

Parce que maintenant c'est un cube Rubik 3D, pour dessiner chaque petit rectangle, vous devez connaître les 4 points fixes du petit rectangle, et ces 4 points fixes seront transformés en fonction de l'angle de rotation de l'espace. Angle du cube de Rubik autour de l'axe x et z.

Par conséquent, l'établissement de la classe rectangulaire est le suivant

 Fonction 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 ]]; .Color = Color;} rect.prototype.setangle = fonction (a, b) {this.anglex = a;

Pointa, PointB, PointC, PointD sont les quatre sommets des petits rectangles.

Le cube de Rubik est divisé en 6 plans, regardez d'abord la face avant. ci-dessous.

Par conséquent, les neuf petits rectangles du côté précédent peuvent être établis par le code suivant

 Pour (var x = 0; x <3; x ++) {pour (var y y = 0; y <3; y ++) {z = 3; 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * Étape + z * 2 * étape], [-Step + x * 2 * étape, -step + y * 2 * étape, -3 * étape + z * 2 * étape], [-3 * étape + x * 2 * Étape, - étape + y * 2 * étape, -3 * étape + z * 2 * étape], 0,0, # ff0000);

Parmi eux, le backlayer est une classe LSPRITE.

Six nouilles ont été établies.

Selon la figure ci-dessus, vous pouvez obtenir les coordonnées de point fixe après avoir transformé la formule suivante

 Rect.prototype.getpoint = fonction (p) {var u2, v2, w2, u = p [0], v = p [1], w = p [2]; ) - V * Math.Sin (this.anglex); v2 = u * Math.sin (this.anglex) + V * Math.cos (this.anglex); = w2; u2 = u; v2 = v * math.cos (this.anglez) -w * Math.sin (this.anglez); this.anglez); u = u2; v = v2; w = w2;

Enfin, dessinez ce rectangle en fonction des quatre coordonnées à point fixe du petit rectangle,

 Rect.prototype.Draw = fonction (couche) {this.graphics.clear (); , this.color);};};};

Parmi eux, Drawertices est une méthode de classe LGraphics dans la bibliothèque LufyleGend.js.

Enfin, le code complet est donné et le code est très petit.

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

 Fonction 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 ]]; .Color = Color;} rect.prototype.Draw = function (couche) {this.graphics.clear (); getPoint (this.pointc), this.getpoint (this.pointd)], true, this.color);}; this.getpoint (this.pointz) [2]; radiprototype.getpoint = fonction (p) {var u2, v2, w2, u = p [0], v = p [1], w = p [2]; = u * math.cos (this.anglex) -v * math.sin (this.anglex); v2 = u * math.sin (this.anglex) + v * math.cos (this.anglex); ; .Anglez) + W * Math.cos (this.anglez); u = u2; v = v2;

 Init (50, MyleGend, 400 400, main); .y = 120; -3 * étape + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -step + y * 2 * étape, -3 * étape + z * 2 * étape], [- 3 * étape + x * 2 * étape, -step + y * 2 * étape, -3 * étape + z * 2 * étape], 0,0, # ff4500); pour (var x = 0; x <3; x ++) {pour (var y y = 0; y <3; y ++) {z = 3; 2 * 2 * 2 * 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -step + y * 2 * étape, -3 * étape + z * 2 * étape], [-3 * Étape + x * 2 * étape, -Step + y * 2 * étape, -3 * étape + z * 2 * étape], 0,0, # ff0000); (var x = 0; x <3; x ++) {pour (var z = 0; z <3; z ++) {y = 0; * Étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * Étape + z * 2 * étape], [- étape + x * 2 * étape, -3 * étape + y * 2 * étape, -step + z * 2 * étape], [-3 * étape + x * 2 * Étape, -3 * étape + y * 2 * 2 * étape, -step + z * 2 * étape], 0,0, # ffffff); x <3; x ++) {pour (var z zar z = 0; z <3; z ++) {y = 3; 3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -3 * étape + z * 2 * étape], [-Step + x * 2 * étape, -3 * étape + y * 2 * étape, -step + z * 2 * étape], [-3 * étape + x * 2 * étape, -3 * Étape + y * 2 * étape, -step + z * 2 * étape], 0,0, # ffff00); y ++) {pour (var z = 0; z <3; z ++) {x = 0; 2 * étape, -3 * étape + z * 2 * étape], [-3 * étape + x * 2 * étape, -3 * étape + y * 2 * étape, -step + z * 2 * étape], [ -3 * étape + x * 2 * étape, -Step + y * 2 * étape, - étape + z * 2 * étape], [-3 * étape + x * 2 * étape, -step + y * 2 * étape , -3 * étape + z * 2 * étape], 0,0, # 008000); (var z = 0; z <3; z ++) {x = 3; * Étape + z * 2 * étape], [-3 * étape + x * 2 * étape, -3 * étape + y * 2 * étape, -step + z * 2 * étape], [-3 * étape + x * 2 * étape, -step + y * 2 * étape, -step + z * 2 * étape], [-3 * étape + x * 2 * étape, -step + y * 2 * étape, -3 * étape + Z * 2 * étape], 0,0, # 0000FF); ; ChildList [Key] .Draw (backlayer);}}

C'est juste un modèle 3D très simple.