A Three.js egy JavaScript nyelven íródott függvénykönyvtár, amely a webböngésző által biztosított környezetben ad lehetőséget 3D grafikai megoldásokra. Technikailag a HTML 5 vászon (canvas) elemén belül, egy téglalap alakú területen dolgozhatunk. A leglátványosabb lehetőségeink a WebGL szabványra épülve vannak, de választhatunk CSS-3D vagy sima HTML 5 vászon grafikai megoldást is. Ez utóbbi kettőt részletesen nem tárgyaljuk.

Az első verziója 2010-ben jelent meg, azóta is aktív fejlesztés alatt áll, pár havonta megjelenik egy új stabil verzió. Időnként egyes részek átdolgozásra kerülnek, így a verzióváltás eltörhet bizonyos funkciókat a programjainkban.

Letöltés

• A forráskód, példák és a dokumentáció elérhető a projekt hivatalos honlapján: http://threejs.org.
• A bal felső sarokban ellenőrizhetjük az éppen aktuális verziószámot (2016. nyár végén ez az r80). A teljes csomagot a download linkre kattintva tölthetjük le.
• Töltsük le a teljes forráskód csomagot. Ez kb. 158 MB (r80).
• Csomagoljuk ki tetszőleges helyre (kb. 305 MB). Az utólagos könnyebb azonosíthatóság végett célszerű a mappa nevének a végére a verziószámot is beírni, pl. three.js-master-r80.
• Az eddigi stabil verziók főbb jellemzőit ezen az oldalon olvashatjuk:
  • https://github.com/mrdoob/three.js/releases

"Telepítés"

• Külön telepítésre nincs szükség. A grafikai modellt tartalmazó HTML fájlba fogjuk a JavaScript kódot beírni, ahová a Three.js, és esetleges más külső JavaScript kódokat be fogjuk importálni. Emiatt célszerű ezeket a külső kódokat egy js (vagy tetszőleges más) nevű almappába másolni.
• Lehetőség van fix URL címről az éppen legújabb JS fájlokat beimportálni, viszont az újabb verziók kompatibilitási problémákat hozhatnak magukkal! Emiatt célszerű inkább a lokális, rögzített verziószámú fájlokat használni!
• Természetesen nem kell a teljes, több száz megabájt méretű anyagot mellékelni. A Three.js magja a build/three.js fájlban található (kb. 1 MB). Ennek van egy kisebb méretű változata three.min.js néven (kb. 500 KB) ugyanitt. Gyakorlatilag a "felesleges" szóközöket és újsor karaktereket távolították el, ami a böngésző számára ugyanúgy értelmeződik. Nyomkereséskor viszont a programozó számára nehezen áttekinthető, ezért célszerűbb a nagyobb méretű változatot használni!
• További segéd JS kódok találhatók az examples/js mappán belül.
  • A controls mappában található TrackballControls.js és az OrbitControls.js kódokat fogjuk felhasználni a példáinkban a kameramozgatáshoz.
  • Külső féltől származó, de a példáinkban hasznos funkciókat ellátó JS kódok libs mappában találhatók. A megjelenítés sebességét mutató stats.min.js, valamint a modellezést vezérlő JS változók interaktív módosítását lehetővé tevő dat.gui.min.js fájlokat a kezdetektől használni fogjuk.