3D alakzatok elforgatása

A három dimenziós forgatás bonyolultnak hangozhat, és az is tud lenni, de vannak egyszerű forgatások is. Ha például a kockánkat a z-tengely mentén (ami a képernyőről kifelé mutat) forgatjuk, akkor igazából csak egy négyzetet forgatunk két dimenzióban:

Amiért érdemes trigonometriát tanulni

Egyszerűsítsünk egy kicsit, és vegyünk egy (x,0) pozíciójú csúcsot. Egyszerű trigonometriát használva meg tudjuk határozni, hogy az origó körül θ szöggel elforgatva hová kerül ez a csomópont:

\begin{aligned} x^{'} = x \cdot \cos (θ) \\ y^{'} = x \cdot \sin (θ) \end{aligned}

Ha nem érted, hogyan kapjuk meg ezeket az egyenleteket, ez a videó segíthet.

Pont forgatása az origó körül

A fenti példa megmutatja, hogyan forgassunk egy pontot az origó körül, ami az x-tengelyen helyezkedik el, de mit tehetünk, ha a pont nem az x-tengelyen van? Ehhez egy kicsit haladóbb trigonometriára lesz szükség. Ha az origó, és az (x ; y) pont távolsága

r

, és az x tengely illetve az origóból az (x ; y)-ba húzott szakasz közrezárt szöge

α

, akkor:

\begin{aligned} x = r \cdot \cos (α) \\ y = r \cdot \sin (α) \end{aligned}

β

szöggel forgatjuk az (x', y') pontba, akkor:

\begin{aligned} x^{'} = r \cdot \cos (α + β) \\ y^{'} = r \cdot \sin (α + β) \end{aligned}

Néhány trigonometriai azonosságot felhasználva azt kapjuk, hogy:

\begin{aligned} x^{'} = r \cdot \cos (α) \cos (β) - r \cdot \sin (α) \sin (β) \\ y^{'} = r \cdot \sin (α) \cos (β) + r \cdot \cos (α) \sin (β) \end{aligned}

Behelyettesítve az x és y fent leírt értékeit, megkapjuk az új koordináták egyenleteit, a régi koordináták és a forgatás szögének függvényében:

\begin{aligned} x^{'} = x \cdot \cos (β) - y \cdot \sin (β) \\ y^{'} = y \cdot \cos (β) + x \cdot \sin (β) \end{aligned}

Forgatási függvény írása

Most, hogy ismerjük az ide tartozó matematikát, megírhatjuk a csúcs vagy akár egy csúcsokat tartalmazó tömb z-tengely menti forgatásához szükséges függvényt! Ez a függvény végigjárja az összes csomópontot a csomópontokat tartalmazó tömbben, és kiszámolja az új koordinátákat, majd módosítja őket. A sin(theta) és cos(theta) értékeket a cikluson kívül tároljuk el, mivel ezeket elegendő egyszer kiszámolni:

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;
   }
};

Ahhoz, hogy 30 fokkal forgassuk a kockát, így kell meghívnunk a függvényt:

rotateZ3D(60);

Láthatod alább az elforgatott kockát – kicsit érdekesebb, mint a korábbi, de valljuk be, hogy nem sokkal:

Forgatás három dimenzióban

Most már tudjuk, hogyan lehet két dimenzióban forgatni, de még mindig úgy néz ki, mintha négyzet lenne. Mi lenne, ha a kockánkat az x-tengely mentén (vízszintesen) forgatnánk el? Ha elképzeljük, hogy lefelé nézünk a kockánkra, ahogy forgatjuk az x-tengely körül, akkor egy forgó négyzetet látnánk, ahogy azt a z-tengely körüli forgatásnál is láttuk.

Használhatjuk a trigonometriai ismereteinket és a korábbi függvényt, csak át kell írni a tengelyeket, vagyis a z-tengely x-tengely lesz. Ebben az esetben a csomópont x koordinátája nem változik, csak az y és a z.

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;
   }
};

Hasonló indoklással készíthetünk egy függvényt, ami az y-tengely körül forgatja a kockánkat:

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;
   }
};

Most, hogy ezeket a függvényeket definiáltuk, elforgathatjuk 60 fokkal a másik két tengely mentén:

rotateX3D(60);
rotateY3D(60);

Alább láthatod a kész kódot. Próbáld ki, hogy a számcsúszkával megváltoztatod az értékeket a függvényhívásban!

Forgatási irány

Amikor egy objektumot forgatunk, forgathatjuk óramutató járásával megegyező vagy ellenkező irányba is. Meg tudod-e mondani, hogy a kockánk milyen irányba forog? Ha bizonytalan vagy, görgess vissza a legelejére, nézd át újra a z-tengely körüli kockaforgatást, majd térj vissza ide.

Ha tanultál már a 3D forgatásokról matek órán, akkor lehet, hogy most meg fogsz lepődni. Általában a pozitív forgatást hívják óramutató járásával ellentétesnek, ahogy ezt az alábbi ábra mutatja:

Ez az ábra a jobbsodrású koordináta-rendszert mutatja. A forgatás irányát úgy tudod megfigyelni, ha a jobb kezedet a tengely körül forgatod.

Viszont a mi ProcessingJS környezetünkben az y-tengely lefele mutat, nem felfele.

Ez a balsodrású koordináta-rendszer. A forgatás irányát itt a bal kezed tekergetésével tudod megfigyelni. Ebben a rendszerben a pozitív forgatás az óramutató járásával egyezik meg.

Sok számítógépes grafikai rendszer használ balsodrású koordináta-rendszert, hiszen van értelme a

[0, 0]

pontot a képernyő bal felső sarkának tekinteni.

Felhasználói interakció

Forgathatjuk a kockát különböző függvényhívások hozzáadásával, de sokkal hasznosabb (és izgalmasabb), ha a nézőnek lehetővé tesszük, hogy ő maga forgassa a kockát az egér segítségével. Először is készítünk egy mouseDragged() függvényt. Ez a függvény minden alkalommal meghívásra kerül, amikor az egeret elhúzzuk.

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

A mouseX és mouseY beépített változók, melyek az egér aktuális helyzetét tárolják. A pmouseX és pmouseY beépített változók, melyek az egér korábbi képkockához tartozó helyzetét tárolják. Vagyis ha az x koordináta nőtt (az egeret jobbra mozgatták), akkor pozitív értéket ad át a rotateY3D() függvénynek, és a kockát óramutató járásával ellenkező irányba mozgatja az y-tengely mentén.

Magad is kipróbálhatod itt lent.

Szeretnél részt venni a beszélgetésben?

Jelentkezz be

Rendezés:

Még nincs hozzászólás.

Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.