เมื่อเร็ว ๆ นี้การเล่นเกมของ Rubik's Cube ต้องการเขียนโมเดลของ Miku ด้วย HMTL5
ต่อไปนี้เป็นหน้าจอแสดงตัวอย่าง กระบวนการผลิตก่อนอื่นคุณต้องดาวน์โหลด HTML5 Open Source Library Lufylegend -.4.0
ลูกบาศก์ของรูบิคแบ่งออกเป็น 6 ระนาบซึ่งแต่ละอันประกอบด้วยสี่เหลี่ยมขนาดเล็ก 9 รูป
เพราะตอนนี้มันเป็นลูกบาศก์ของ Rubik 3 มิติในการวาดสี่เหลี่ยมเล็ก ๆ แต่ละอันคุณต้องรู้ 4 จุดคงที่ของสี่เหลี่ยมขนาดเล็กและจุดคงที่ทั้ง 4 จุดเหล่านี้จะถูกเปลี่ยนตามมุมการหมุนของพื้นที่ มุมของลูกบาศก์ของรูบิครอบแกน x และ z
ดังนั้นการจัดตั้งชั้นสี่เหลี่ยมจึงมีดังนี้
ฟังก์ชั่น rect (pointa, pointb, pointc, pointd, unglex, anglez, สี) {base (this, lsprite, []); )/4, (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4, (pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ]; this.z = this.pointz [2]; .color = color;} rect.prototype.setangle = function (a, b) {this.anglex = a;Pointa, PointB, PointC, PointD เป็นสี่จุดของสี่เหลี่ยมขนาดเล็ก
ลูกบาศก์ของรูบิคแบ่งออกเป็น 6 ระนาบก่อนมองที่ด้านหน้า ด้านล่าง.
ดังนั้นรูปสี่เหลี่ยมจัตุรัสขนาดเล็กเก้ารูปแบบในด้านก่อนหน้านี้สามารถสร้างได้ด้วยรหัสต่อไปนี้
สำหรับ (var x = 0; x <3; x ++) {สำหรับ (var y y = 0; y <3; y ++) {z = 3; 2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3 *step + z*2*step], [-step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*step + z*2*step], [-3*step + x*2 *ขั้นตอน, - ขั้นตอน + y*2*ขั้นตอน, -3*step + z*2*step], 0,0,#ff0000);ในหมู่พวกเขา Backlayer เป็นชั้นเรียน LSPRITE
มีการจัดตั้งก๋วยเตี๋ยวหกครั้ง
ตามตัวเลขด้านบนคุณจะได้รับพิกัดคงที่หลังจากเปลี่ยนสูตรต่อไปนี้
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.lems);ในที่สุดวาดรูปสี่เหลี่ยมผืนผ้านี้ตามพิกัดสี่จุดคงที่ของสี่เหลี่ยมขนาดเล็ก
rect.prototype.draw = ฟังก์ชั่น (เลเยอร์) {this.graphics.clear (); , this.color);};};};ในหมู่พวกเขา Drawvertices เป็นวิธีการของคลาส LGRAPHICS ใน LUFYLEGEND.JS Library
ในที่สุดรหัสที่สมบูรณ์จะได้รับและรหัสมีขนาดเล็กมาก
อันดับแรก index.html<! type = text/javascript src = ../lufylegend -.4.0.min.js> </script> <script type = text/javascript src =./main.js> </script> xt/javascript src =./rect/rect .js> </script> </body> </html>ประการที่สองคลาส rect
ฟังก์ชั่น rect (pointa, pointb, pointc, pointd, unglex, anglez, สี) {base (this, lsprite, []); )/4, (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4, (pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ]; this.z = this.pointz [2]; .color = color;} rect.prototype.draw = ฟังก์ชั่น (เลเยอร์) {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; . ประการที่สาม main.js Init (50, Mylegend, 400,400, Main); .y = 120; -3*ขั้นตอน + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y *2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [ - 3*ขั้นตอน + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], 0,0,#ff4500); สำหรับ (var x = 0; x <3; x ++) {สำหรับ (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y* 2*ขั้นตอน, -3*ขั้นตอน + z*2*step], [-step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*step + z*2*step], [-3 *step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*step + z*2*step], 0,0,#ff0000); (var x = 0; x <3; x ++) {สำหรับ (var z = 0; z <3; z ++) {y = 0; *ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*step], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3* ขั้นตอน + z*2*ขั้นตอน], [ -ขั้นตอน + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -step + z*2*ขั้นตอน], [-3*step + x*2* ขั้นตอน, -3*step + y*2*2*ขั้นตอน, -step + z*2*ขั้นตอน], 0,0,#ffffff); x <3; 3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -3*ขั้นตอน + z* 2*step], [-step + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -step + z*2*step], [-3*step + x*2*ขั้นตอน, -3 *ขั้นตอน + y*2*ขั้นตอน, -step + z*2*step], 0,0,#ffff00); y ++) {สำหรับ (var z = 0; z <3; z ++) {x = 0; 2*ขั้นตอน, -3*ขั้นตอน + z*2*ขั้นตอน], [-3*ขั้นตอน + x*2*ขั้นตอน, -3*ขั้นตอน + y*2*ขั้นตอน, -step + z*2*ขั้นตอน], [ -3*step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -ขั้นตอน + z*2*step], [-3*ขั้นตอน + x*2*ขั้นตอน, -step + y*2*ขั้นตอน , -3*step +z*2*step], 0,0,#008000); (var z = 0; z <3; z ++) {x = 3; *step + z*2*step], [-3*step + x*2*ขั้นตอน, -3*step + y*2*ขั้นตอน, -step + z*2*step], [-3*step + x *2*step, -step + y*2*ขั้นตอน, -step + z*2*step], [-3*step + x*2*ขั้นตอน, -step + y*2*ขั้นตอน, -3*ขั้นตอน + z*2*step], 0,0,#0000ff); backlayer.childlist = backlayer.childlist.sort tion (a, b) {return az -bz;}); ChildList [key] .draw (backlayer);}}นี่เป็นเพียงแบบจำลอง 3 มิติที่ง่ายมาก