Fő tartalom
Programozás
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:
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:
Ha beta szöggel forgatjuk az (x', y') pontba, akkor:
Néhány trigonometriai azonosságot felhasználva azt kapjuk, hogy:
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:
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 open bracket, 0, comma, 0, close bracket 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?
Még nincs hozzászólás.