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 az általános objektum attribútumokkal.

Térbeli elhelyezés

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 3 térbeli tengelynek megfelelően. 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 );

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

Pár megjegyzés

• 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.Math.degToRad() és THREE.Math.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 1 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, ez elvileg 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 a geometriai transzformációk tárgyalásánál található.