[HTML5] 3D Model-Erhang 코드 구현 회전 스테레오 큐브 인스턴스

최근 Rubik 's Cube의 게임 플레이는 갑자기 Rubik's Cube가 3D 큐브이기 때문에 Miku의 모델을 작성하고 싶었습니다.

먼저 HTML5 오픈 소스 라이브러리 Lufylegend -.4.0을 다운로드해야합니다.

Rubik의 큐브는 6 개의 비행기로 나뉘며 각각은 9 개의 작은 사각형으로 구성됩니다.

이제 각 작은 사각형을 그리는 것은 3D 루빅스 큐브이기 때문에 작은 사각형의 4 가지 고정점을 알아야 하며이 4 개의 고정 점은 공간의 회전 각도에 따라 변환됩니다 X와 Z 축 주위의 Rubik의 큐브 각도.

따라서 직사각형 클래스의 확립은 다음과 같습니다.

 기능 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) {anglex = a;

Pointa, Pointb, Pointc, Pointd는 앙 플렉스의 4 개의 정점입니다.

Rubik의 큐브는 6 개의 비행기로 나뉩니다. 먼저 큐브의 중심이 3D 좌표계의 중심으로 사용되면 9 개의 작은 사각형의 각 고정 점에 해당하는 좌표가 표시됩니다. 아래에.

따라서 이전 측면의 9 개의 작은 사각형은 다음 코드로 설정할 수 있습니다.

 for (var x = 0; x <3; x ++) {for (var y = 0; y <3; y ++) {z = 3; 2*step, -3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y*2*step, -3 *step + z*2*step], [-step + x*2*step, -step + y*2*step, -3*step + z*2*step], [-3*step + x*2 *단계 + y*2*단계, -3*step + z*2*step], 0,0,#ff0000);

그중에는 백 레이어가 LSPRITE 클래스입니다.

이 6 개의면을 그렸습니다

위 그림에 따르면 다음 공식을 변환 한 후 고정 -점 좌표를 얻을 수 있습니다.

 rect.prototype.getPoint = function (p) {var u2, v2, w2, u = p [0], v = p [1], w = p [2]; ) - v2 = anglex (anglex); = w2; u; v2 = v2 = math.sin (this.angleg); anglegz); u = v2;

마지막으로, 작은 사각형의 4 개의 고정 -점 좌표에 따라이 사각형을 그립니다.

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

그중에서도 DrawVertices는 Lufylegend.js 라이브러리의 Lgraphics 클래스의 방법입니다.

마지막으로 전체 코드가 제공되며 코드는 매우 작습니다.

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

 기능 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), true, this.color); this.getPoint (this.pointz) [2]; = u * Math.cos (anglex) -v * math.sin (v2 = u * math.sin) + v * math.cos (w2 = w); u = v2 = v2 = v2; .ANGLEZ) + whecos (v2);

 init (MyLegend, 400,400, main), backlayer, key = null; .y = 120; // 이후 (var x = 0; x <3; x ++) {for (var y = 0; y <3; y ++) {z = 0; -3*step + x*2*step, -3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y *2*step, -3*step + z*2*step], [-step + x*2*step, -step + y*2*step, -3*step + z*2*step], [ - 3*step + x*2*step, -step + y*2*step, -3*step + z*2*step], 0,0,#ff4500); for (var x = 0; x <3; x ++) {for (var y = 0; y <3; y ++) {z = 3; 2*2*2*2*단계, -3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y* 2*step, -3*step + z*2*step], [-step + x*2*step, -step + y*2*step, -3*step + z*2*step], [-3 *step + x*2*step, -step + y*2*step, -3*step + z*2*step], 0,0,#ff0000); (var x = 0; x <3; x ++) {for (var z = 0; z <3; z ++) {y = 0; *단계, -3*step + y*2*단계, -3*step + z*2*step], [-step + x*2*step, -3*step + y*2*step, -3* step + z*2*step], [ -step + x*2*step, -3*step + y*2*step, -step + z*2*step], [-3*step + x*2* 단계, -3*step + y*2*2*단계, -step + z*2*step], 0,0,#ffffff); x <3; 3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y*2*step, -3*step + z* 2*step], [-step + x*2*step, -3*step + y*2*step, -step + z*2*step], [-3*step + x*2*step, -3 *step + y*2*step, -step + z*2*step], 0,0,#ffff00); y ++) {for (var z = 0; z <3; z ++) {x = 0; 2*step, -3*step + z*2*step], [-3*step + x*2*step, -3*step + y*2*step, -step + z*2*step], [ -3*step + x*2*step, -step + y*2*step, -Step + Z*2*step], [-3*step + x*2*step, -step + y*2*단계 , -3*step +z*2*step], 0,0,#008000); AddChild (rect);}} // (var y = 0; y <3; y ++) { (var z = 0; z <3; z ++) {x = 3; new rect ([-3*step + x*2*step, -3*step*2*step, -3 *step + z*2*step], [-3*step + x*2*step, -3*step + y*2*step, -step + z*2*step], [-3*step + x *2*step, -step + y*2*step, -step + z*2*step], [-3*step + x*2*step, -step + y*2*step, -3*step + z*2*step], 0,0,#0000ff); backlayer.addchild (rect);}} backlayer .adeventListener (levent.enter_frame, onframe) {a += 0.1, b += 0.1 backlayer.childlist = childlist.sort tion (a, b) {key in backlayer.childlist [key] .setangle (a, b); Childrist [key] .Draw (Backlayer);}}

이것은 매우 간단한 3D 모델입니다.