5. Texturer, modeller och licenser

Målet

Kunna byta en yta eller modell utan att förstöra spelet, och förstå var filerna måste ligga. Läs level.js för texturer och modellinläsning.

Från fil till material

En textur är en bild som läggs på en 3D-yta. I material() laddar TextureLoader en JPEG från public/assets/textures/. texture.colorSpace = THREE.SRGBColorSpace behövs för vanliga färgbilder. RepeatWrapping och repeat.set(x, y) upprepar mönstret över stora ytor.

const texture = new THREE.TextureLoader().load('assets/textures/cracked_concrete_diff_1k.jpg');
texture.colorSpace = THREE.SRGBColorSpace;
const surface = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.95 });

Med Vite kopieras allt i public/ till webbplatsens rot. Spelets assetUrl(...) lägger till rätt basväg när appen publiceras under /threejs/. Använd därför samma hjälpfunktion i spelkoden när du lägger till egna assets. En länk som börjar med /assets/ kan fungera lokalt men gå sönder på en undersida.

GLB-modeller laddas asynkront

GLTFLoader.loadAsync(path) ger ett Promise: modellen kan bli klar först efter flera bildrutor. loadModel() väntar på filen, skapar en egen kopia av modellen och skalar den till en bestämd höjd. Tills dess finns en tom anchor-grupp på rätt plats. Vid filfel visas en enkel kapsel som reserv i stället för ett osynligt monster.

Horror Game Monsters konverterade skelett får fel skala i Three.js. Webbversionen använder modellens synliga mesh och beräknar en gångrörelse för armar och ben varje bildruta. Spindelmodellen använder GLB-animationer. Det är en begränsning i just denna zombie-GLB, inte något du måste lösa för att följa kursen.

Källor och CC0

• Golv: Cracked Concrete, CC0 enligt Poly Haven.
• Väggar: Rebar Reinforced Concrete, CC0.
• Metall: Rusty Metal Sheet, CC0.
• Monster: 3D Horror Game Monster och Spider; kontrollera respektive assetsida innan du distribuerar ändrade versioner.

Gör själv

1. Öppna public/assets/textures/ och hitta de tre 1K-bilderna. Läs filnamnen exakt.
2. I din kopia: ändra repeat.set(5, 5) för golvet till ett annat värde. Du ska se mönstrets skala ändras utan att väggarnas geometri flyttas.
3. Skriv medvetet fel filnamn, läs nätverksfelet i webbläsarens Network-panel och återställ sedan.
4. Lägg en källrad för varje ny asset i dina egna kursanteckningar: namn, upphovsperson, URL och licens.

Klart när: du kan förklara skillnaden mellan geometri, material, textur och GLB-modell samt varför en felaktig filsökväg kan ge en tom eller omålad yta.