Textúrák külső képfájlból való létrehozása nagyon egyszerűen megy Three.js-ben. Létre kell hozni egy TextureLoader objektumot, majd meghívni a load() függvényét. Paraméterként a betöltendő képfájl nevét kell átadnunk, eredményként a textúra objektumot kapjuk.

A textúra betöltése aszinkron, vagyis a függvény visszatér, mielőtt a textúra betöltése befejeződött volna! Ha nem várjuk meg a textúra betöltését, akkor textúrázatlan objektum fog addig megjelenni a színtér renderelésekor. Viszont a rendszer gondoskodik arról, hogy a betöltés után a textúra az anyaghoz megfelelően hozzárendelődjön.

Vigyázzunk arra, hogy a futtatást webszerveren keresztül végezzük, mert lokálisan megnyitva a böngészők biztonsági okokból nem engedik a fájl hozzáférést!

Használati példa

Töltsük be a külső képfájlt pl. az init() függvényben. A textúrát az anyaghoz rendelhetjük hozzá a map attribútumán keresztül.

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'assets/texture/tc-earth_daymap_surface_rs.jpg' );

var geometry = new THREE.SphereGeometry( 8, 80, 80 );
var material = new THREE.MeshPhongMaterial();
material.map = texture;
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Komplexebb modellekhez több külső fájl betöltése is szükséges lehet, valamint fontos lehet a megfelelő hibakezelés és a felhasználó tájékoztatása a betöltés menetéről. Ezekkel a bevezető példában nem foglalkoztunk. További részletek a programozástechnikai témakörök között található:

• Külső erőforrások aszinkron betöltése