Blender Three.js exporter (r79, r80)

• A Blender alapértelmezésként nem támogatja a Three.js JSON formátumát, ehhez beépülő modult kell telepíteni. Ennek menete a Blender telepítés leírásánál megtalálható.

• Figyeljünk arra, hogy a Blender exporter és a programunkban felhasznált Three.js verziószám egyezzen! A Three.js ezen része időnként változik és a kompatibilitás nem feltétlenül marad meg!

• Alapértelmezésként csak a geometria kerül kiírásra. Ha anyagjellemzőket is ki szeretnénk íratni, akkor külön be kell kapcsolni.

  • Geometry: Vertices, Faces, Normals, UVs.
  • Shading: Face Materials.
  • Scene: Materials.

• Ugyanígy a textúrák esetén is.

  • Settings rész: Textures, Export textures, Embed textures.

Ne felejtsük el, hogy a létrejövő JSON fájl csak a textúra képfájl nevét tartalmazza, így a képfájlnak a JSON fájllal egy mappában kell szerepelnie!

Példaprogram

• Az előzőleg elkészített biliárdgolyó modellt töltjük be és használjuk a modellezésnél.
• ThreeJsBlenderGeometryMaterial.html.

Loader objektum használata

• A betöltendő anyagokat célszerű az assets/models mappába elhelyezni.
• Használjuk a THREE.JSONLoader() konstruktort.
• A loader objektum load függvényének adjuk meg paraméterként a sikeres betöltés esetén meghívandó függvényünket.
  • Ez megkapja a fájlból betöltött geometria és anyag objektumokat.
  • Az anyag egy tömb lesz, mert a JSON fájlban akár több anyag definíciója is szerepelhet. Ha biztosan csak 1 van, akkor használjuk a tömb első (vagyis 0. indexű) elemét.
  • A geometriából és az anyagból hozzunk létre új mesh-t, amit aztán a színtérhez adhatunk.
  • 90 fokos elforgatásra szükség lehet a koordináta-rendszer különbözőség miatt!
• A betöltés aszinkron, amíg nem áll készen a mesh, ne használjuk a program más részein!
• Több objektum/textúra betöltése esetén használjunk LoadingManager objektumot, ahogyan a textúrázásnál láttuk!

Fényforrás hozzáadása a színtérhez

• Legalább egy ambiens és egy pontfényt, reflektorfény, vagy irányfény szükséges, hogy a felszínhálót megfelelően lássuk.

Vegyünk fel egy globális változót a betöltött mesh objektum reprezentálására.

var meshLoaded;

A betöltést végző kódot célszerű önálló függvénybe elhelyezni, pl. loader() néven. Ebben készítsünk egy JSONLoader objektumot.

var loader = new THREE.JSONLoader();

Hívjuk meg a loader.load() függvényt. Első paramétere a betöltendő modell neve. A második egy függvény, amely a sikeres betöltés után hívódik meg. A paraméterként megkapott geometry és mat objektumok segítségével létrehozzuk a meshLoaded objektumot. A mat egy tömb, amelynek az első elemét használjuk fel.

A legfurcsább kódrész a Blender és a Three.js eltérő koordináta-rendszer kezelése miatt szükséges. A talaj Blender esetén az XY, míg Three.js-ben az XZ sík. Emiatt a betöltött geometriát 90 fokkal elforgatjuk az X-tengely mentén, hogy helyükre kerüljenek a dolgok. Mivel a geometriai transzformációk reprezentációjával nem foglalkoztunk, így ennek pontos megértéséhez nincs elegendő tudásunk. A lényeg, hogy a geometriát reprezentáló térbeli pontok új helyre kerülnek a koordináta-rendszer váltásnak megfelelően.

A szebb gömb megjelenítés érdekében kiszámítjuk a csúcspontokban a súlyozott normálvektorokat (a Blender csak lapnormálokat biztosít, amelyek a JSON fájlból beolvasásra is kerültek).

loader.load('assets/models/Billiard_8.json', function (geometry, mat) {
    meshLoaded = new THREE.Mesh(geometry, mat[0]);

    // Blender koordináták átalakítása Three.js-be
    meshLoaded.rotation.x = THREE.Math.degToRad( 90 );
    meshLoaded.updateMatrix();
    geometry.applyMatrix( meshLoaded.matrix );
    meshLoaded.rotation.set( 0, 0, 0 );
    meshLoaded.updateMatrix();

    geometry.computeVertexNormals();
    meshLoaded.scale.set( 4, 4, 4 );
});