Skip navigation

Beépített geometriák és térbeli elhelyezésük

Témakörök

Beépített geometriák

A modellezés során térben elhelyezett pontokat, vonalakat, és háromszögekből előálló 2D síkidomokat és 3D felszínhálókat használhatunk. A Three.js kész konstruktorfüggvényeket ad elemi síkidomok és térbeli felszínhálók előállítására. Ezekkel ismerkedünk meg ebben a fejezetben. Saját geometriák közvetlen létrehozását később tárgyaljuk. Az alábbi főbb lehetőségeink vannak:

2D:

  • Szabályos sokszög, segítségével körlap is közelíthető.
  • Sík lap, talaj modellezésre megfelelő.

3D:

  • Téglatest.
  • Gömb.
  • Kúp.
  • Henger, csonkakúp.
  • Tórusz, tórusz csomó.
  • Szöveg.
  • Számos további, amivel részletesen nem foglalkozunk.

Segéd geometriák

  • Objektumok éleinek kiemelésére.
  • Térbeli koordináta-rendszer tengelyeinek megjelenítésére.
  • 3D nyíl modell.
  • Továbbiak, amelyek később lesznek érdekesek (Pl. kamera látómezejének szemléltetésére, megvilágítások szemléltetése, ...).

Objektumok térbeli elhelyezése

A beépített geometriák a világ koordináta-rendszer origójában kerülnek definiálásra. Lehetőségünk van X-, Y- és Z-tengelyek mentén elmozgatni, méretüket skálázni, és a tengelyek körül adott szögben elforgatni őket.

Általános használati mód

A geometriák létrehozása a következők szerint történik.

  • Szükség lesz egy változóra, amely a geometria objektumot tárolja.
  • A new kulcsszóval kell egy új objektumpéldányt létrehoznunk.
  • Az egyes geometria konstruktor függvények a THREE objektumon belül vannak definiálva.
  • A konstruktornak változó számú paramétert adhatunk át, amelyek  jobbról balra haladva elhagyhatók. A nem definiált paraméterek az alapértéküket veszik fel. A konstruktornak kötelezően átadandó értékeket vörös, az opcionálisakat zöld színnel jelöljük.
  • A Three.js hivatalos dokumentációjában található példaprogramok esetén ha a jobb felső sarokban lévő objektumnévre kattintunk, egy paraméterbeállító panelt kapunk. Az értékeken az egér segítségével interaktívan állíthatunk. Használjuk ki!

Fontos!

  • A példakódok függvényre lokális definíciókat tartalmaznak (vagyis a változónév előtt szerepel a let kulcsszó). Amennyiben több függvényben is el szeretnénk érni az objektumpéldányt (pl. animate() vagy render()), akkor a változót globálisként kell létrehozni, vagyis minden függvényen kívül helyezzük el a definíciót! Előzetesen már definiált nevű globális változó használatakor nem szabad szerepeltetni a let kulcsszót az értékadás elején!
    • let boxObject;
    • boxObject = new THREE.BoxGeometry( 10, 10, 10 );
  • A létrehozás után az egyes geometriáknak megfelelő attribútumokon keresztül el tudjuk érni a geometria paramétereit. Figyeljünk arra, hogy ezek megváltoztatása nem vonja maga után a geometria újragenerálását! Ha változtatni szeretnénk, új geometria objektumot kell létrehoznunk!
  • Figyeljünk arra, hogy az objektumokhoz saját változónévvel rendelkező geometria, anyag és mesh kerüljön definiálásra (ha csak nem indokolt az osztott használat).
    • Következetesen használjunk névadási konvenciót! Pl. egy talajt modellező objektum esetén adjunk groundGeometry, groundMaterial, groundMesh változóneveket!

Tipp

Használjuk fel a 02_02_ThreeJsObjectTesterSkeleton.html példaprogramot, ami a programozási keretet definiálja. Az 53. sortól kezdődően másoljuk be a geometriákhoz tartozó kódrészleteket és próbáljuk ki! Az egér segítségével körül tudjuk járni az objektumokat (bal egérgomb lenyomása melleti egérmozgatás, görgővel közelít-távolít). 

Kapcsolódó programozástechnikai anyagok (kiegészítő anyag)

FPS kijelzés

A fejlesztői munkát segítheti, ha vizuálisan kijelezzük a modellezés sebességét, vagyis hány képkocka rajzolása történik meg 1 másodperc alatt. Erre külső JavaScript modult használhatunk (stats.module.js).

Interaktív paraméterállítás

Szintén a fejlesztés segítésére egy külső kód (lil-gui.module.js) használható. A modellezést befolyásoló számszerű, vagy listából választható paramétereket interaktív módon változtathatjuk, aminek a hatása azonnal látható.