[HTML5] 3D-модель-эрханг.

Недавно геймплей куба Рубика внезапно захотел написать модель Мику с HMTL5.

Сначала вам нужно скачать HTML5 Bibrary Library Lufylegend -.4.0

Куб Рубика разделен на 6 плоскостей, каждый из которых состоит из 9 небольших прямоугольников.

Поскольку теперь это 3D -куб Рубика, чтобы нарисовать каждый небольшой прямоугольник, вам необходимо знать 4 фиксированных точек небольшого прямоугольника, и эти 4 фиксированные точки будут преобразованы в соответствии с углом вращения пространства. угол куба Рубика вокруг оси x и z.

Следовательно, установление прямоугольного класса выглядит следующим образом

 Функция 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.anglece = a;

Pointa, pointb, pointc, pointd -это четыре вершины маленьких прямоугольников.

Куб Рубика разделен на 6 плоскостей, сначала посмотрите на переднюю сторону. ниже.

Следовательно, девять небольших прямоугольников на предыдущей стороне могут быть установлены следующим кодом

 For (var x = 0; x <3; x ++) {for (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, -step + y*2*step, -3*step + z*2*step], [-3*step + x*2 *Step, - шаг + y*2*step, -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.anglece); = w2; this.Angez);

Наконец, нарисуйте этот прямоугольник в соответствии с четырьмя фиксированными координатами точки небольшого прямоугольника,

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

Среди них Drawvertices -это метод класса LGraphics в библиотеке lufylegend.js.

Наконец, полный код дается, и код очень мал.

 <! 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), 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; // после (var x = 0; x <3; x ++) {for (var y = 0; -3*Шаг + x*2*Шаг, -3*Шаг + y*2*Шаг, -3*Шаг + z*2*Шаг], [-step + x*2*step, -3*step + y *2*Шаг, -3*Шаг + z*2*Шаг], [-step + x*2*step, -step + y*2*step, -3*step + z*2*step], [ - 3*Шаг + x*2*Шаг, -tep + y*2*Шаг, -3*Шаг + z*2*Шаг], 0,0,#ff4500); for (var x = 0; x <3; x ++) {for (var y y = 0; y <3; y ++) {z = 3; 2*2*2*2*step, -3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y* 2*Шаг, -3*Шаг + z*2*Шаг], [-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; *Step, -3*step + y*2*step, -3*step + z*2*step], [-step + x*2*step, -3*step + y*2*step, -3* Шаг + z*2*Шаг], [ -Шаг + X*2*Шаг, -3*Шаг + y*2*Шаг, -tep + z*2*Шаг], [-3*Шаг + X*2* Шаг, -3*Шаг + y*2*2*Шаг, -tep + z*2*Шаг], 0,0,#ffffff); x <3; 3*Шаг + 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, -tep + z*2*step], 0,0,#ffff00); y ++) {for (var z = 0; z <3; z ++) {x = 0; 2*Шаг, -3*Шаг + z*2*Шаг], [-3*Шаг + X*2*Шаг, -3*Шаг + y*2*Шаг, -tep + z*2*Шаг], [ -3*Шаг + x*2*Шаг, -step + y*2*step, -шаг + z*2*step], [-3*step + x*2*step, -step + y*2*step , -3*step +z*2*step], 0,0,#008000); (var z = 0; z <3; z ++) {x = 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); ; childlist [key] .draw (backlayer);}}

Это просто очень простая 3D -модель.