A külső fájlban tárolt információk beolvasásához az aszinkron betöltés menetével kell tisztában lennünk. Erről külön fejezetben olvashatunk.
A betöltésre példát a 05_01_ThreeJsBlenderGeometry példaprogramban találunk.
A modulunkban a loader() függvényt hívjuk, 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.
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.
let meshLoaded;
A loader() függvényben készítünk egy OBJLoader betöltő objektumot, amely a Wavefront OBJ formátumú fájlok betöltését végzi. Az .obj és .mtl fájlok tartalmából az OBJLoader beolvasó egy THREE.Group objektumot készít, ami THREE.Mesh objektumok egy csoportját tartalmazza gyermek objektumként. Ezzel az objektummal a geometriai transzformációknál fogunk részletesebben megismerkedni. Ezt a csoport objektumot közvetlenül hozzáadhatjuk a színtérhez. A példakódban egy meshLoaded nevű globális változóba mentjük el a tartalmát.
Ha hozzá szeretnénk férni a csoport objektumban leírt Mesh-ekhez, akkor végig kell járnunk a gyermek objektumait. A példában a betöltött Mesh geometriák (a példában csak egy objektum van a csoportban, de a megoldás tetszőlegesre számúra is működik) anyag objektumánál állítjuk be új Lambert anyagot kétoldalas megjelenítéssel. A megfelelő méretű megjelenítéshez egy négyszeres nagyítást adunk meg a modellhez a scale attribútumok beállításával. A sikeres betöltés után hívjuk meg az init() függvényt a modellezés indítására.
A Blender-ben beállított anyagok és textúrák átvételét egy későbbi részben mutatjuk be.
function loader() {
let loader = new THREE.OBJLoader();
loader.load(
// Forrás URL
'assets/models/csonak.obj',
// Modell betöltése utáni függvény
function ( loaded ) {
meshLoaded = loaded;
meshLoaded.scale.set( 4, 4, 4 );
// Anyag hozzárendelés
meshLoaded.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
mat = new THREE.MeshLambertMaterial( {color: 0x2080f0, side: THREE.DoubleSide} );
child.material = mat;
}
} );
init();
},
// Betöltés előrehaladása közben hívódik
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// Hibás betöltés esetén
function ( error ) {
console.log( 'An error happened' );
});
}
