Skip navigation

Objektumok térbeli elhelyezése

Lokális objektum koordináta-rendszer

A Three.js beépített objektumai a saját, lokális koordináta-rendszerükben definiálják a geometriát. Néhány példa:

  • A kocka középpontja az origóban van, az élei párhuzamosak a világ koordináta-rendszer tengelyeivel.
  • A gömb középpontja az origó.
  • A sokszög középpontja az origó, a csúcspontjai az XY-síkon helyezkednek el.

Természetes igény, hogy a tárgyakat térben el tudjuk pakolni, el tudjuk forgatni őket, méretükön változtatni tudjunk. Ezt egyszerűen elérhetjük objektum attribútumokon keresztül.

Térbeli elhelyezés objektum attribútumokkal

A Three.js Mesh objektumai rendelkeznek pozíciós (position), forgatási (rotation) és skálázási (scale) attribútumokkal. Mindegyik három komponensből áll, a három térbeli főtengelynek megfelelően (x, y, z). A komponenseket el tudjuk érni beállító (set) függvényekkel, ekkor mindhárom értéket kap. Ha elegendő csak egy komponens értékén módosítani, akkor használhatjuk a mezőkiválasztó (pont) operátort.

A következő példában létrehozunk egy kockát, majd elhelyezzük a középpontját az X = 100, Y = 50, Z = 50 térbeli pontba. A kameránk helyét is módosítjuk, mindhárom koordináta értékét 200-ra állítjuk. Nézeti irányát pedig a színtér origójához állítjuk be a lookAt() függvényével.

boxGeometry = new THREE.BoxGeometry( 100, 100, 100 );
boxMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } );
boxMesh = new THREE.Mesh( boxGeometry, boxMaterial );
boxMesh.position.set( 100, 50, 50 );
scene.add( boxMesh );

camera.position.x = 200;
camera.position.y = 200;
camera.position.z = 200;
camera.lookAt( scene.position.x, scene.position.y, scene.position.z );

Célszerű egy tengely segéd geometriát is elhelyezni a színtérben az előző részben látott módon, hogy lássuk a koordináta-rendszert, amihez képest az elhelyezés történik.

Megjegyzések

Forgatás esetén a szög értéket radiánban kell megadnunk! A fok <-> radián konverziót nekünk kell elvégeznünk!

  • radian = fok * Math.PI / 180;
  • fok = radian * 180 / Math.PI;
  • Ugyanezt a feladatot látják el a THREE.MathUtils.degToRad() és THREE.MathUtils.radToDeg() függvények is.

Skálázás esetén az objektum koordinátái megszorzódnak a skálázó tényezővel. Emiatt ezek alapértéke 1.

  • Ha kicsinyíteni szeretnénk, akkor (0, 1) közötti értékeket válasszunk.
  • 1-nél nagyobb értékek nagyítanak, távolabb viszik a pontokat. 
  • 0 érték esetén az adott irány szerint egy síkra lapítódnak a pontok. Ne használjuk! Ha síkidomot szeretnénk, modellezünk azt.
  • Negatív értékek az adott tengelyre tükröznek. Nem célszerű használni.

A transzformációk alkalmazási sorrendje rögzített.

  • A sorrend fontos, mert ha felcseréljük például a skálázást és a forgatást, más eredményt kap(hat)unk.
  • A Three.js esetén először a skálázás, majd a forgatás, végül az eltolás érvényesül, függetlenül attól, hogy milyen sorrendben módosítottuk őket a forráskódban! (Ráadásul a forgatásnál sem mindegy a sorrend, de ez változtatható.)
  • Ennek oka röviden az, hogy (alapértelmezett működéskor) a Three.js rendereléskor "nézi meg" ezeket az értékeket, és a fenti sorrendben hajtja őket végre.
  • További részletek és az összetetebb térbeli mozgatás ismertetése a geometriai transzformációk tárgyalásánál található.

Példaprogram

Próbáljuk ki a 02_01_ThreeJsCubeTransformCommon példaprogramot!

Egy kocka modellen tesztelhetjük a pozíciós, forgató és skálázó paraméterek hatását. A paraméter értékeket interaktívan módosíthatjuk. Az elforgatási szög fokokban jelenik meg a panelen, ezt számítjuk át radiánba a megjelenítéskor.

A színtérben elhelyeztünk két AxesHelper objektumot is. Az egyik a globális világ koordináta-rendszert, a másik pedig a kocka lokális koordináta-rendszerét mutatja. Ez utóbbi tengelyek mentén történnek a geometriai transzformációk. A forgatás hatása egy kicsit komplexebb, mert az egyes tengelyek körüli elforgatások hatással vannak a következő tengelyek mentiekre is. Részletesebben a geometriai transzformációk tárgyalásánál nézzük ezt meg.

Feladatok

Próbáljuk ki, hogy mi történik, ha a skála értékeket kinullázzuk!

Figyeljük meg, hogy a Z-tengely menti eltolás és skálázás hatása nem látható. Ennek oka, hogy párhuzamos vetítésű kameránk van, ami a Z-tengely irányából nézi a színteret. Módosítsuk a kamerapozíciót úgy, hogy a (120, 150, 200) pontból nézzen az origó felé! Ez megtehető a panelen található Kamera váltás gombra kattintva. Ekkor a Z-tengely menti eltolás hatását is látni fogjuk.