Skip navigation

Geometria exportálás és Three.js betöltés

Blender mentés és exportálás

Mentés/betöltés

A Blender a munkánkat saját .blend formátumában menti el. A mentés és betöltés funkciók az Info ablak File menüjében találhatók. Figyeljünk arra, hogy mentéskor az előzmények listája nem kerül kiírásra! Vagyis visszatöltés után az Undo funkció nem tud visszább lépni a szerkesztésben!

Export/import

Számos formátum használatos 3D modellek, animációk tárolására. A Blender alapértelmezetten támogat ezek közül többet is. Ezek az Export (kiírás) és Import (betöltés) menüpontok a File menüben. Figyeljünk arra, hogy az egyes formátumokhoz kapcsolódóan egyedi paneleken keresztül szabályozhatjuk, milyen adat és hogyan íródjon ki. A panel a bal oldali sávban található. A Three.js natív formátumát alapból nem ismeri a Blender.

Three.js export

A Blender add-on modulokkal bővíthető. A Three.js írói is készítettek ilyen modult, amit manuálisan tudunk a Blender-hez hozzáadni. A lépések leírása a jegyzet elejei Blender telepítési útmutatóban olvashatók. A modul csak exportálót tartalmaz, Three.js formátumból beolvasni nem tudunk.

Ha a modellünk csak geometriát tartalmaz, akkor az exportálási alapbeállítások megfelelők számunkra. A bal oldali panelen ellenőrizhetjük, hogy a csúcspontok (Vertices), lapok (Faces), normálvektorok (Normals) kiírás be van-e kapcsolva.

Az exportálás eredménye egy .json kiterjesztésű fájl lesz. Ez egy szöveges formátum, így tartalmát meg is vizsgálhatjuk egy szövegszerkesztőben megnyitva. Az alapértelmezett Blende kocka exportálása az alábbi eredményt adja:

{
"uvs":[],
"metadata":{
"uvs":0,
"type":"Geometry",
"generator":"io_three",
"vertices":8,
"version":3,
"normals":6,
"faces":6
},
"vertices":[1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
"normals":[-0,0,1,0,-0,-1,1,0,-0,-0,1,0,-1,-0,0,0,-1,-0],
"name":"CubeGeometry",
"faces":[33,0,1,2,3,0,0,0,0,33,4,7,6,5,1,1,1,1,33,0,4,5,1,2,2,2,2,33,1,5,6,2,3,3,3,3,33,2,6,7,3,4,4,4,4,33,4,0,3,7,5,5,5,5]
}

Three.js geometria beolvasás

A .json fájlból a Three.js beolvasó modulja egy THREE.Geometry objektumot készít, amit ugyanúgy használhatunk, mint bármilyen más, korábban megismert objektumot. Ha anyagot nem definiáltunk a Blender-ben, akkor a Three.js kódunkban kell egyet létrehoznunk a Mesh készítéshez, ami aztán a színtérhez adható.

A beolvasás aszinkron módon történik, vagyis a program működése folytatódik. A betöltő meghívja az általunk átadott függvényt a beolvasás elkészültekor. Vigyázzunk arra, hogy a még be nem olvasott geometriát ne használjuk fel a modellezésnél, mert hibaüzenetet kapunk!

Erre az egyik megoldás, ha használat előtt ellenőrizzük, hogy az adott nevű változó definiált-e?

if( mesh ) {
  // Ha már létezik az objektum
  mesh.rotation.y += 0.01;
}

A másik, hogy akkor kezdjük csak el a modellezést, ha már minden külső objektum beolvasásra került. Mivel ez elég időigényes is lehet a weben keresztül, célszerű a felhasználót tájékoztatni a beolvasás előrehaladtáról. Ezzel itt most nem foglalkozunk. Az egyszerűség kedvéért az alábbi lépéseket alkalmazzuk.

ThreeJsBlenderGeometry példaprogram

A body elem paraméterként a loader() függvényünk nevét kapja, vagyis most nem a modellezés inicializálását indítjuk az oldal betöltődése után először, hanem a geometria betöltőt.

<body onload="loader()">

Szükségünk lesz egy globális változóra, ami a betöltött objektumot reprezentálja és a modellezés további részében ezen keresztül elérhetjük.

var meshLoaded;

A betöltő függvényben először létrehozunk egy betöltő objektumot. Ennek a load függvénye indítja az aszinkron beolvasást. A függvény első paraméterei egy sztring, amely a betöltendő adat elérési útvonalát tartalmazza. A második paraméter az a függvény, amely meghívásra kerül a beolvasás végeztével. Ez a függvény megkapja a betöltött geometriát THREE.Geometry objektumként. Ehhez készítünk egy Lambert anyagot és legyártjuk a Mesh-t. A függvény ezután meghívja az init() függvényt, ami elindítja a modellezést, ahol a meshLoaded objektumot már szabadon használhatjuk.

function loader() {
    var loader = new THREE.JSONLoader();
    loader.load( 'assets/models/csonak.json', function ( geometry ) {
        var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, wireframe: false, side: THREE.DoubleSide } );
        meshLoaded = new THREE.Mesh( geometry, material );
        meshLoaded.scale.set( 4, 4, 4 );

        init();
    });
}

A load() függvénynek még két további függvényt adhatunk át paraméterként, amelyekkel a betöltés előrehaladta, illetve a hibás betöltés kezelhető.

LoadingManager

Ha több külső fájl tartalmát is be kell olvasnunk, akkor javasolt a LoadingManager objektum használata. Itt az összes betöltésre együttesen adhatunk meg kezelőfüggvényeket.

Dokumentáció