Az előző példában láthattuk, hogy a betöltött kép szépen ráfeszül a gömb felszínére. Ha gömb helyett kockát modellezünk, akkor azt láthatjuk, hogy minden lap egyenként a textúra képet mutatja. Most megismerjük, hogyan derül ki, melyik a felszínháló egyes darabjai milyen mintázatot kapnak?

A betöltött kép a textúra síkra kerül, a koordinátái normalizálásra kerülnek. Ez azt jelenti, hogy a bal alsó sarok koordinátája (0, 0), a jobb felsőé pedig (1, 1) az eredeti mérettől függetlenül. Az első koordináta (U) a vízszintes, a második (V) a függőleges.

Amikor saját geometriát modellezünk, minden laphoz csúcspontonként meg kell adni, hogy melyik textúra koordináta tartozik hozzá. Így természetesen térben bárhogy elhelyezett lapokra is tudunk mintát feszíteni, nem kell, hogy egy síkon legyenek. Az más kérdés, hogy a felszínt síkba kiteríteni mennyire egyszerű feladat. Íves felszínek (pl. gömb) esetén ez torzulás nélkül nem is lehetséges - ez a térképészet alapfeladata már évezredek óta. A torzulás nem feltétlenül vehető észre, de legalábbis sokszor elfogadható mértékű.

Mivel saját geometriaként korábban egy három darab háromszögből előálló trapéz modellt készítettünk, most ezt látjuk el mintázattal. Az ábra mutatja a trapéz háromszögeinek kiterítését a textúra síkra, ami megadja a megfeleltetéseket. Vegyük észre, hogy a textúra síkra vetítve a második háromszög területe nagyobb a másik kettőjénél. Ez torzulást fog okozni. Eldönthetjük, ez megfelelő-e nekünk. Ha nem, más leképezést választhatunk (ha tudunk). Azt is figyeljük meg, hogy a rendszer elegyíti az objektum saját sárga színét a ráfeszülő textúra mintázattal.

Természetesen nem vagyunk kötelesek a teljes textúra képet felhasználni. Például egy körlapra ráfeszíthetünk egy kör alakú mintázatrészt. Az is egy felhasználási mód, hogy egy textúra több mintázatot is tartalmaz, és a textúra koordináták hozzárendelésével szabályozzuk, mi hova kerüljön. A textúrákat a  GPU tárolja, és a váltás időigényes. A váltás ideje megspórolható, ha egy textúra több mintázatdarabot is tartalmaz.

A beépített Three.js geometriák hasonló módon definiálják a lapok csúcspontjaihoz a textúra koordinátákat.

Ezt a Three.js forráskódban ellenőrizhetjük. A téglatest esetén például minden lap a textúra minta sarokpontjait kapja.

A fő lépések az alábbiak.

Betöltjük a textúrát, mint korábban is.

// Textúra betöltése
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'assets/texture/tc-earth_daymap_surface_rs.jpg' );

Definiáljuk a trapézt definiáló tömböket (csúcspontok és index). Ezt szintén láttuk már korábban.

// Csúcspontok tömbje
let vertices = [];
vertices.push(
        -5.0,  2.5, 0.0,
        -2.5, -2.5, 0.0,
         0.0,  2.5, 0.0,
         2.5, -2.5, 0.0,
         5.0,  2.5, 0.0
);

// Lapok tömbje
let indices = [];
indices.push(
    0, 1, 2,
    1, 3, 2,
    2, 3, 4
);

A textúra koordináták szintén egy tömbben kerülnek megadásra, csúcspontonként egy-egy 2 dimenziós UV koordinátákként.

let texturecoords = [];
let textureCoordsAttributeSize = 2;
texturecoords.push(
    0.0, 1.0,
    0.0, 0.0,
    0.5, 1.0,
    1.0, 0.0,
    1.0, 1.0
);

Létrehozzuk a puffergeometriát és hozzáadjuk az indexet és a puffer attribútum tömböket, most az 'uv'-t is.

// BufferGeometry létrehozása és az attribútumok beállítása
geometry = new THREE.BufferGeometry();
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( texturecoords, textureCoordsAttributeSize ) );

Végül létrehozzuk az anyagot és a háromszöghálót, amit a színtérhez adunk.

// Anyag
material = new THREE.MeshPhongMaterial( {
    color: 0xffff00,
    wireframe: false,
    side: THREE.DoubleSide,
    map: texture
} );

// Háromszögháló
var poly = new THREE.Mesh( geometry, material );
scene.add( poly );

A beépített Three.js geometriák hasonló módon definiálják a lapok csúcspontjaihoz a textúra koordinátákat.

Ezt a Three.js forráskódban ellenőrizhetjük. A téglatest esetén például minden lap a textúra minta sarokpontjait kapja.