[Html5] 3d model-erhang kode implementasi rotasi stereo cube instance

Baru -baru ini, gameplay Rubik's Cube tiba -tiba ingin menulis model miku dengan HMTL5.

Pertama, Anda perlu mengunduh HTML5 Open Source Library Lufylegend -.4.0

Kubus Rubik dibagi menjadi 6 bidang, yang masing -masing terdiri dari 9 persegi panjang kecil.

Karena sekarang ini adalah kubus Rubik 3D, untuk menggambar setiap persegi panjang kecil, Anda perlu mengetahui 4 titik tetap dari persegi panjang kecil, dan 4 titik tetap ini akan diubah sesuai dengan sudut rotasi ruang. Sudut kubus Rubik di sekitar sumbu X dan Z.

Oleh karena itu, pembentukan kelas persegi panjang adalah sebagai berikut

 Fungsi 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 = function (a, b) {this.anglex = a;

Pointa, pointb, pointc, pointd adalah empat simpul dari persegi panjang kecil.

Rubik's Cube dibagi menjadi 6 pesawat, lihat pertama di sisi depan. di bawah.

Oleh karena itu, sembilan persegi panjang kecil di sisi sebelumnya dapat ditetapkan dengan kode berikut

 Untuk (var x = 0; x <3; x ++) {untuk (var y y = 0; y <3; y ++) {z = 3; 2*Langkah, -3*Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], [-Step + x*2*Langkah, -3*Langkah + y*2*Langkah, -3 *Langkah + Z*2*Langkah], [-step + x*2*Langkah, -step + y*2*Langkah, -3*Langkah + Z*2*Langkah], [-3*Langkah + X*2 *Langkah, - Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], 0,0,#FF0000);

Di antara mereka, backlayer adalah kelas LSPRITE.

Enam mie telah ditetapkan.

Menurut gambar di atas, Anda bisa mendapatkan koordinat tetap setelah mengubah formula berikut

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

Akhirnya, gambar persegi panjang ini sesuai dengan empat koordinat tetap dari persegi panjang kecil,

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

Di antara mereka, drawvertices adalah metode kelas lgraphics di lufylegend.js Library.

Akhirnya, kode lengkap diberikan, dan kode sangat kecil.

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

 Fungsi 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 (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); u = u2; .anglez) + W * Math.cos (this.anglez);

 Init (50, Mylegend, 400.400, Main); .y = 120; // Setelah (var x = 0; x <3; x ++) {untuk (var y = 0; y <3; y ++) {z = 0; -3*Langkah + X*2*Langkah, -3*Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], [-Step + x*2*Langkah, -3*Langkah + Y *2*Langkah, -3*Langkah + Z*2*Langkah], [-step + x*2*langkah, -step + y*2*Langkah, -3*Langkah + Z*2*Langkah], [ - 3*Langkah + x*2*Langkah, -Sept. untuk (var x = 0; x <3; x ++) {untuk (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*Langkah, -3*Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], [-Step + X*2*Langkah, -3*Langkah + Y* 2*Langkah, -3*Langkah + Z*2*Langkah], [-step + x*2*Langkah, -step + y*2*Langkah, -3*Langkah + Z*2*Langkah], [-3 *Langkah + X*2*Langkah, -Sept. (var x = 0; x <3; x ++) {untuk (var z = 0; z <3; z ++) {y = 0; *Langkah, -3*Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], [-Step + X*2*Langkah, -3*Langkah + Y*2*Langkah, -3* Langkah + Z*2*Langkah], [ -Langkah + X*2*Langkah, -3*Langkah + Y*2*Langkah, -Step + Z*2*Langkah], [-3*Langkah + X*2* Langkah, -3*Langkah + Y*2*2*Langkah, -Septasi + Z*2*Langkah], 0,0,#ffffff); x <3; x ++) {untuk (var z zar z = 0; z <3; z ++) {y = 3; 3*Langkah + Y*2*Langkah, -3*Langkah + Z*2*Langkah], [-Step + X*2*Langkah, -3*Langkah + Y*2*Langkah, -3*Langkah + Z* 2*Langkah], [-step + x*2*langkah, -3*Langkah + y*2*langkah, -step + z*2*langkah], [-3*Langkah + x*2*langkah, -3 *Langkah + Y*2*Langkah, -Step + Z*2*Langkah], 0,0,#ffff00); y ++) {for (var z = 0; z <3; z ++) {x = 0; 2*Langkah, -3*Langkah + Z*2*Langkah], [-3*Langkah + X*2*Langkah, -3*Langkah + Y*2*Langkah, -Sept + Z*2*Langkah], [ -3*Langkah + X*2*Langkah, -Sept + y*2*Langkah, -Langkah + Z*2*Langkah], [-3*Langkah + x*2*Langkah, -Step + y*2*Langkah , -3*Langkah +Z*2*Langkah], 0,0,#008000); (var z = 0; z <3; z ++) {x = 3; *Langkah + Z*2*Langkah], [-3*Langkah + X*2*Langkah, -3*Langkah + Y*2*Langkah, -Step + Z*2*Langkah], [-3*Langkah + x *2*langkah, -step + y*2*langkah, -step + z*2*langkah], [-3*langkah + x*2*langkah, -step + y*2*langkah, -3*Langkah + Z*2*Langkah], 0,0,#0000ff); ; ChildList [Key] .draw (backlayer);}}

Ini hanya model 3D yang sangat sederhana.