[HTML5] 3D model-hundreds of lines of code to achieve three-dimensional cube Rotation

Recently, after studying how to create a cube, I suddenly wanted to use hmtl5 to write a cube model. Because the cube is a 3D cube, I tried to write a simple 3D model with HTML5.

Below are the test links and previews.

Http://lufy.netne.net/lufylegend-js/lufylegend-1.4/Rubik/index.html

Production Process

First you need to download HTML5 open source library lufylegend-1.4.0

Http://blog.csdn.net/lufy_legend/article/details/7644932

Cube is divided into six sides, each of which consists of nine small rectangles. Now I encapsulate each small rectangle as a class,

Because we are building a 3D cube, to draw each small rectangle, we need to know the four fixed points of the small rectangle, and these four fixed points will change according to the Rotation Angle of the space, therefore, to calculate the four fixed-point coordinates, you need to know the angle from which the cube rotates around the X axis and the Z axis.

Therefore, create a rectangle class as follows:

function Rect(pointA,pointB,pointC,pointD,angleX,angleZ,color){base(this,LSprite,[]);this.pointZ=[(pointA[0]+pointB[0]+pointC[0]+pointD[0])/4,(pointA[1]+pointB[1]+pointC[1]+pointD[1])/4,(pointA[2]+pointB[2]+pointC[2]+pointD[2])/4];this.z = this.pointZ[2];this.pointA=pointA,this.pointB=pointB,this.pointC=pointC,this.pointD=pointD,this.angleX=angleX,this.angleZ=angleZ,this.color=color;}Rect.prototype.setAngle = function(a,b){this.angleX = a;this.angleZ = b;this.z=this.getPoint(this.pointZ)[2];};

Pointa, pointb, pointc, and pointd are the four vertices of the small rectangle. anglex and anglez are the rotation angles of the X axis and the Z axis respectively, and color is the color of the small rectangle.

The Cube is divided into six sides. Let's first look at the front side. If the center of the cube is the center of the 3D coordinate system, the coordinates corresponding to each point of the nine small rectangles are shown in.

Therefore, the nine small rectangles above can be created by the following code.

for(var x=0;x<3;x++){for(var y=0;y<3;y++){z = 3;var rect = new Rect([-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,"#FF0000");backLayer.addChild(rect);}}

The backlayer is an lsprite class, and the step is the length of half a small rectangle. In the same way, the other five faces can be obtained.

The six faces are created. Before drawing the six faces, you must first calculate the coordinates of each point based on the rotation angle. See the following figure.

Based on the preceding figure, use the following formula to obtain the converted fixed point coordinates.

Rect.prototype.getPoint = function(p){var u2,v2,w2,u=p[0],v=p[1],w=p[2];    u2 = u * Math.cos(this.angleX) - v * Math.sin(this.angleX);    v2 = u * Math.sin(this.angleX) + v * Math.cos(this.angleX);    w2 = w;    u = u2; v = v2; w = w2;    u2 = u;    v2 = v * Math.cos(this.angleZ) - w * Math.sin(this.angleZ);    w2 = v * Math.sin(this.angleZ) + w * Math.cos(this.angleZ);    u = u2; v = v2; w = w2;    return [u2,v2,w2];};

Finally, draw the rectangle based on the four fixed-point coordinates of the small rectangle,

Rect.prototype.draw = function(layer){this.graphics.clear();this.graphics.drawVertices(1,"#000000",[this.getPoint(this.pointA),this.getPoint(this.pointB),this.getPoint(this.pointC),this.getPoint(this.pointD)],true,this.color);};

Drawvertices is a method of the lgraphics class in the lufylegend. js library. It can draw a polygon based on the input fixed-point coordinate array.

Finally, the complete code is provided, with few lines of JavaScript code.

1. index.html

<! Doctype HTML> 
Ii. rect class
function Rect(pointA,pointB,pointC,pointD,angleX,angleZ,color){base(this,LSprite,[]);this.pointZ=[(pointA[0]+pointB[0]+pointC[0]+pointD[0])/4,(pointA[1]+pointB[1]+pointC[1]+pointD[1])/4,(pointA[2]+pointB[2]+pointC[2]+pointD[2])/4];this.z = this.pointZ[2];this.pointA=pointA,this.pointB=pointB,this.pointC=pointC,this.pointD=pointD,this.angleX=angleX,this.angleZ=angleZ,this.color=color;}Rect.prototype.draw = function(layer){this.graphics.clear();this.graphics.drawVertices(1,"#000000",[this.getPoint(this.pointA),this.getPoint(this.pointB),this.getPoint(this.pointC),this.getPoint(this.pointD)],true,this.color);};Rect.prototype.setAngle = function(a,b){this.angleX = a;this.angleZ = b;this.z=this.getPoint(this.pointZ)[2];};Rect.prototype.getPoint = function(p){var u2,v2,w2,u=p[0],v=p[1],w=p[2];    u2 = u * Math.cos(this.angleX) - v * Math.sin(this.angleX);    v2 = u * Math.sin(this.angleX) + v * Math.cos(this.angleX);    w2 = w;    u = u2; v = v2; w = w2;    u2 = u;    v2 = v * Math.cos(this.angleZ) - w * Math.sin(this.angleZ);    w2 = v * Math.sin(this.angleZ) + w * Math.cos(this.angleZ);    u = u2; v = v2; w = w2;    return [u2,v2,w2];};
3. Main. js
Init (50, "mylegend", 400,400, main); var a = 0, B = 0, backlayer, step = 20, key = NULL; function main () {backlayer = new lsprite (); addchild (backlayer); backlayer. X = 120, backlayer. y = 120; // After for (VAR x = 0; x <3; X ++) {for (var y = 0; y <3; y ++) {z = 0; var rect = new rect ([-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"); backlayer. addchild (rect) ;}}// front for (VAR x = 0; x <3; X ++) {for (var y = 0; y <3; Y ++) {z = 3; var rect = new rect ([-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, "# ff0000"); backlayer. addchild (rect) ;}}// for (VAR x = 0; x <3; X ++) {for (VAR z = 0; Z <3; Z ++) {Y = 0; var rect = new rect ([-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,-3 * Step + y * 2 * step, -Step + z * 2 * Step], [-3 * Step + x * 2 * step,-3 * Step + y * 2 * step, -Step + z * 2 * Step], 0, "# ffffff"); backlayer. addchild (rect) ;}}// for (VAR x = 0; x <3; X ++) {for (VAR z = 0; Z <3; Z ++) {Y = 3; var rect = new rect ([-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,-3 * Step + y * 2 * step, -Step + z * 2 * Step], [-3 * Step + x * 2 * step,-3 * Step + y * 2 * step, -Step + z * 2 * Step], 0, "# FFFF00"); backlayer. addchild (rect) ;}}// left for (var y = 0; y <3; y ++) {for (VAR z = 0; Z <3; Z ++) {x = 0; var rect = new rect ([-3 * Step + x * 2 * step,-3 * Step + y * 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], 008000, "#"); backlayer. addchild (rect) ;}}// right for (var y = 0; y <3; y ++) {for (VAR z = 0; Z <3; Z ++) {x = 3; var rect = new rect ([-3 * Step + x * 2 * step,-3 * Step + y * 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. addeventlistener (Levent. enter_frame, onframe);} function onframe () {A + = 0.1, B + = 0.1; backlayer. childlist = backlayer. childlist. sort (function (a, B) {return. z-B. z;}); For (key in backlayer. childlist) {backlayer. childlist [Key]. setangle (a, B); backlayer. childlist [Key]. draw (backlayer );}}
This is just a very simple 3D model. Thank you for your support.