Завъртане на 3D форми

Ротацията на неща в три измерения звучи и може да бъде сложно, но има и няколко прости ротации. Например ако си представим, че въртим куб около оста z (тази, която сочи извън екрана), ние всъщност въртим квадрат в две измерения:

Причина да учим тригонометрия

Можем да опростим нещата още повече, като разгледаме един възел на позиция (x, 0). С помощта на проста тригонометрия можем да открием, че позицията на точката след завъртането на θ градуса около началната точка е:

$x^{'} = x \cdot c o s (θ)$ ‍
$y^{'} = x \cdot s i n (θ)$ ‍

Ако не разбираш откъде идват тези уравнения, това видео ще ти помогне.

Ротация на точка около началото

Горният пример ни позволява да завъртим точка от оста x около началото на координатната система, но ако точката не е на оста x? Това изисква малко по-сложна тригонометрия. Ако наречем разстоянието между точка (x, y) и началото на координатната система

r

и ъгълът между правата до (x, y) и оста

α

, то:

$\begin{aligned} x = r \times c o s (α) \\ y = r \times s i n (α) \end{aligned}$ ‍

Ако завъртим на β градуса до точка (x', y'), тогава:

$\begin{aligned} x^{'} = r \times c o s (α + β) \\ y^{'} = r \times s i n (α + β) \end{aligned}$ ‍

Използваме малко тригонометрични тъждества и получаваме:

$\begin{aligned} x^{'} = r \times c o s (α) c o s (β) - r \times s i n (α) s i n (β) \\ y^{'} = r \times s i n (α) c o s (β) + r \times c o s (α) s i n (β) \end{aligned}$ ‍

Заместваме горните стойности за x и y и получаваме уравнение с нови координати като функция на старите координати и ъгъла на ротация:

$\begin{aligned} x^{'} = x \times c o s (β) - y \times s i n (β) \\ y^{'} = y \times c o s (β) + x \times s i n (β) \end{aligned}$ ‍

Да напишем функция за ротация

След като разбрахме математиката, можем да напишем функция, която завърта точка, или още по-добре – масив от точки, около оста z. Тази функция ще обходи всички точки в масива, ще намери текущите координати x и y и ще ги актуализира. Запазваме sin(theta) и cos(theta) извън цикъла, защото трябва да ги изчислим само веднъж:

var rotateZ3D = function(theta) {
  var sinTheta = sin(theta);
  var cosTheta = cos(theta);
  for (var n = 0; n < nodes.length; n++) {
    var node = nodes[n];
    var x = node[0];
    var y = node[1];
    node[0] = x * cosTheta - y * sinTheta;
    node[1] = y * cosTheta + x * sinTheta;
  }
};

За да завъртим куба на 30 градуса, ще извикаме функцията така:

rotateZ3D(30);

Можеш да видиш завъртяния куб по-долу – станал е малко по-интересен от преди, но не чак толкова:

Ротация в три измерения

Сега можем да завъртим нашия куб в две измерения, но все още изглежда като квадрат. Ами ако искаме да завъртим куба около оста y (вертикалната ос)? Ако си представим, че гледаме надолу към куба, докато го завъртаме около оста y, ще видим въртящ се квадрат, както беше при завъртането около оста z.

Можем да използваме тригонометрията и функцията от преди малко и само да сменим оста така, че оста z да стане ос y. В този случай координатите y на точката няма да се променят, а само координатите x и z.

var rotateY3D = function(theta) {
  var sinTheta = sin(theta);
  var cosTheta = cos(theta);
  for (var n = 0; n < nodes.length; n++) {
    var node = nodes[n];
    var x = node[0];
    var z = node[2];
    node[0] = x * cosTheta - z * sinTheta;
    node[2] = z * cosTheta + x * sinTheta;
  }
};

И сега можем да използваме същия аргумент, за да създадем функция, която да завърти нашия куб около осата x:

var rotateX3D = function(theta) {
  var sinTheta = sin(theta);
  var cosTheta = cos(theta);
  for (var n = 0; n < nodes.length; n++) {
    var node = nodes[n];
    var y = node[1];
    var z = node[2];
    node[1] = y * cosTheta - z * sinTheta;
    node[2] = z * cosTheta + y * sinTheta;
  }
};

След като дефинирахме тези функции, можем да завъртим на 30 градуса около другите две оси:

rotateX3D(30);
rotateY3D(30);

По-долу можеш да видиш целия код. Използвай плъзгача, за да промениш стойностите, с които се извиква функцията.

Взаимодействие с потребителя

Можем да завъртим куба, като добавим извикване на функцията, но е по-полезно (и приятно), ако можем да позволим на потребителя да върти куба със своята мишка. Затова трябва да създадем функцията mouseDragged(). Тази функция се извиква автоматично, когато мишката се плъзга.

mouseDragged = function() {
 rotateY3D(mouseX - pmouseX);
 rotateX3D(mouseY - pmouseY);
};

mouseX и mouseY са вградени променливи, които съдържат текущата позиция на мишката. pmouseX и pmouseY са вградени променливи, които съдържат позицията на мишката в предишния кадър. Така че, ако x-координатата се е увеличила (ние преместваме мишката надясно), изпращаме положителна стойност на rotateY3D() и въртим куба обратно на часовниковата стрелка около оста y.

Можеш да видиш това по-долу.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.