Bygg spelet i Three.js.

Det här är en fristående nybörjarkurs. Du kan börja här utan att ha läst Godot-kursen och utan tidigare erfarenhet av Three.js. Vi bygger flyktspelet för desktop i webbläsaren och lär oss sedan hur samma värld visas i Meta Quest via WebXR.

Du behöver inte kunna Godot, GDScript eller 3D-modellering. Det hjälper om du har sett lite HTML och JavaScript, men de begrepp vi använder förklaras här. Spelet är ett färdigt referensprojekt som du kan köra direkt; kursens övningar låter dig förstå och bygga delarna stegvis i en egen kopia. Ändra inte originalet när du experimenterar.

I webbversionen finns en anläggning med två gömda nycklar, dörrar, monster, åttaskottspistol, magasin, medkit, hälsa, tidtagning, poäng och utgång. Spelets text är på engelska; undervisningen är på svenska. Assetfilerna är kopior av CC0-filerna i spelprojektet.

Välj startpunkt

• Aldrig använt Three.js? Börja i kapitel 1 med den JavaScript du behöver. I kapitel 2 installerar du verktygen och skapar din första 3D-scen.
• Kan du redan JavaScript? Skumma kapitel 1 och fortsätt med kapitel 2. Kursen förutsätter inte att du kan Godot.
• Vill du bara spela först? Öppna webbversionen och prova desktopkontrollerna. Återvänd sedan till kapitel 1.

Kapitlen följer en sammanhängande nybörjarväg: JavaScript, projektstart, 3D och rendering först; därefter miljö, styrning, interaktioner och spelsystem. Sist testar och publicerar du spelet. Du kan börja här utan att läsa Godot-kursen.

Det du behöver

1. En Mac eller annan dator med en aktuell webbläsare och internet för att installera paket.
2. En kodredigerare, till exempel VS Code eller Zed. TextEdit i rikt text-läge passar inte för kod.
3. Node.js med npm. I terminalen ska node --version och npm --version visa versionsnummer.
4. Meta Quest är valfritt i början. Allt fram till VR-testet kan göras på desktop.

Kör kommandon i projektmappen web-threejs/, inte i Godot-projektets rot. Terminalen visar aktuell mapp med pwd. Kommandot npm install hämtar Three.js och Vite; npm run dev startar utvecklingsservern. WebGPU används där webbläsaren stöder det. WebXR är VR-gränssnittet; i Quest kan renderingen behöva använda WebGL2 i stället för WebGPU.

Så arbetar du i kursen

Varje kapitel har ett mål, några ord att förstå, en praktisk ändring och en kontrollpunkt. Läs först förklaringen, gör sedan en ändring i taget och se vad som händer i webbläsaren. Om något går sönder: läs det första felmeddelandet i webbläsarens konsol och ångra just den ändringen. En vit eller tom sida är oftast ett JavaScript-fel, inte ett fel i Quest.

I kodexemplen betyder scene hela 3D-världen, camera det spelaren ser genom och renderer den del som ritar pixlarna. mesh är ett synligt objekt, geometry dess form och material dess yta. Vi använder meter som praktisk skala: en spelare är ungefär 1,65 meter hög.

Spela och lär

• Starta webbversionen och prova desktopkontrollerna först.
• Läs kapitlen i ordning och öppna källfilerna via länkarna. Använd gärna en separat kopia av web-threejs/ för experiment.
• Godot-projektets Blueprints/ och Main.tscn påverkas inte av webbkursen.
• När desktop fungerar: starta över HTTPS eller Quest-lokalhost, öppna sidan i Quest Browser och välj Enter VR.

Projektstruktur

xr-game/                       befintligt Godot-spel — orört
└─ web-threejs/                ny fristående webbversion
   ├─ src/main.js              spel-loop, inmatning, objekt och UI
   ├─ src/level.js             bana, modeller och kollisioner
   ├─ src/rules.js             poäng och gemensamma spelregler
   ├─ public/assets/           kopior av återanvända CC0-assets
   └─ course/content/          den här kursens källtexter

Hur webbversionen fungerar

Three.js ritar 3D men innehåller inte en komplett spelmotor. Därför skriver vi själva enkel kollisions- och interaktionskod: hinkar flyttas åt sidan med en interaktion, monster följer ett rutnät och skott testas längs en siktlinje. Det är avsiktligt små byggstenar som går att förstå. Den som redan känner Godot kommer att känna igen spelmålen, men inte behöva översätta några Godot-begrepp för att följa kursen.