21. Felsök, bygg och dela webbversionen

Målet

Kunna avgöra om ett problem ligger i JavaScript, assetfiler, webbservern, WebGPU eller Quest/WebXR – och bygga en version som går att publicera. Du behöver inte ha ett headset för den första delen.

Följ en enkel felsökningsordning

Sidan öppnas inte: kontrollera att npm run dev fortfarande körs och att adressen använder rätt port, normalt 4323.
Tom sida: öppna webbläsarens Console. Läs det första röda felet och fil/linjenummer. Ett senare fel kan vara en följd av det första.
Modell eller textur saknas: öppna Network-panelen, filtrera på filnamnet och leta efter 404. Kontrollera versaler, mapp och assetUrl(...).
Spelet syns men går inte att styra: klicka i spelrutan för pekarlås, kontrollera om startmenyn är öppen och prova WASD innan VR.
Enter VR saknas: kontrollera navigator.xr-stödet, säker kontext (HTTPS eller localhost) och att sidan verkligen öppnats i Quest Browser.
Quest når inte Macens server: kör adb devices och adb reverse --list; en vanlig lokal HTTP-adress via Macens IP ger inte automatiskt WebXR-rättigheter.

Ändra bara en sak åt gången. Skriv upp: vad du förväntade dig, vad som faktiskt hände, exakt feltext och vilka steg som återskapar problemet. Det gör felsökningen mycket snabbare än att prova slumpmässiga kodändringar.

Kör automatiska och manuella tester

I mappen web-threejs/:

npm test
npm run build

Testerna kontrollerar bland annat åttaskottsmagasin, dörrregler, spawn-avstånd, monsterblandning, medkit och poäng. De garanterar inte att en modell ser rätt ut eller att knapparna fungerar i Quest. Gör därför även ett helt speltest på desktop enligt kapitel 20, och ett separat headsettest om du har tillgång till Quest.

Förstå byggmappen

Vite lägger den färdiga webbversionen i dist/. Den mappen innehåller HTML, JavaScript, CSS, kurs och kopierade publika assets. En produktionsserver måste servera filerna över HTTPS för vanlig WebXR på en extern adress. Kopiera hela dist/ till webbplatsens threejs/-mapp, inte bara dist/course/. Bygget använder relativa sökvägar för spelets JavaScript, CSS, modeller och texturer. Därför fungerar samma filer både på lokal adress /threejs/ och på GitHub Pages under /vr-godot/threejs/. Om startsidan syns men spelet är tomt: kontrollera att threejs/assets/ följde med och att nätverksfliken inte visar 404.

Den lokala webbplatsen för det här projektet är /Users/paul/Pauls kurssidor/vr-godot/. Godot-kursen och webbkursen är separata. Ändra inte Godot-projektets scener när du publicerar webbkursens filer.

Slutkontroll

Gemensamma startsidan länkar till båda fristående kurserna.
Webbkursens kapitel, källkodslänkar och spelknapp fungerar utan 404.
Desktopversionen kan spelas från start till slut utan att falla ur världen.
Om Quest används: VR startar, kontrollerna stämmer med instruktionerna och texten går att läsa i headsetet.
Nya assetfiler har dokumenterad källa och licens.

Klart när: du kan leverera en byggd webbversion, återskapa ett fel med tydliga steg och avgöra om felet finns i filerna, servern, webbläsaren eller headsetet.