2. Kom igång med Three.js, WebGPU och WebXR

Målet

Starta utan Godot: installera projektets JavaScript-beroenden, kör webbversionen och bygg en minimal 3D-scen som du förstår själv. Vite är en utvecklingsserver som hittar JavaScript-moduler; Three.js skapar 3D-objekten. Öppna spelets main.js och package.json när den lilla övningen fungerar.

1. Kontrollera verktygen

Öppna Terminal och kör node --version och npm --version. Om ett kommando saknas, installera en aktuell LTS-version av Node.js. Stäng och öppna Terminal igen och kontrollera på nytt. Du behöver inte installera Three.js globalt.

Gå till mappen web-threejs i spelprojektet. Du kan dra mappen till Terminal efter cd så slipper du skriva en sökväg med mellanslag. Kontrollera med pwd att du står i rätt mapp. Kör sedan:

npm install
npm run dev

Terminalen visar en lokal adress, normalt http://localhost:4323/. Öppna den på datorn. Låt Terminal-fönstret vara öppet medan du arbetar; Ctrl+C stoppar servern. node_modules/ innehåller hämtade paket och ska inte redigeras. package.json anger beroenden och kommandon, src/ innehåller spelkoden och public/assets/ innehåller bilder, modeller och ljud.

2. Skapa en egen liten övningsscen

Skapa mappen lab inne i web-threejs/. Lägg till lab/index.html med följande innehåll. Övningen stör inte det färdiga spelet och behöver inte publiceras.

<!doctype html>
<html lang="sv">
  <head><meta charset="utf-8"><title>Min första 3D-scen</title></head>
  <body style="margin:0"><script type="module" src="./main.js"></script></body>
</html>

Lägg till lab/main.js:

import * as THREE from 'three';
import { WebGPURenderer } from 'three/webgpu';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1c313c);
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 1.6, 4);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x70d8b0 })
);
cube.position.y = 1;
scene.add(cube);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 2));

const renderer = new WebGPURenderer({ antialias: true });
await renderer.init();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setAnimationLoop(() => {
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

Öppna http://localhost:4323/lab/. Du ska se en roterande grön kub. Om sidan är tom: öppna webbläsarens utvecklarverktyg och läs första felet i Console. Kontrollera särskilt filnamn, citattecken och att npm run dev fortfarande körs.

Vad de nya orden betyder

import hämtar kod från ett paket. Vite översätter paketnamnet three till filer som webbläsaren kan ladda.
scene är en behållare för allt som ska synas. Ett objekt syns inte förrän det lagts till med scene.add(...).
PerspectiveCamera bestämmer synfältet. position.set(x, y, z) placerar kameran; här är Y höjd.
Mesh kombinerar en form (BoxGeometry) med en yta (MeshStandardMaterial). Materialet behöver ljus, därför lägger vi till HemisphereLight.
renderer ritar scenen. setAnimationLoop kör en funktion för varje bildruta; ändringen av rotation.y gör att kuben snurrar.

Ändra kubens färg och Y-position. Förutsäg resultatet innan du sparar och ser om du hade rätt. Det är samma arbetssätt vi använder när vi bygger spelet.

Spelets WebGPURenderer använder WebGPU där det fungerar. Om initieringen misslyckas skapar spelet en ny renderer med WebGL2 som reserv. I Quest Browser väljer appen WebGL2 när XRGPUBinding saknas. WebGPU är grafikgränssnittet; WebXR är gränssnittet för headset och kontroller. De är alltså inte samma sak.

renderer = new WebGPURenderer({ antialias: true, forceWebGL: webglFallback });
await renderer.init();
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType('local-floor');
document.body.appendChild(VRButton.createButton(renderer));
renderer.setAnimationLoop(tick);

Gör själv i det färdiga spelet

Öppna http://localhost:4323/ och bekräfta att startmenyn och 3D-banan visas.
Öppna http://localhost:4323/course/index.html i en andra flik så att du kan läsa och testa sida vid sida.
Läs renderingsstatus uppe till höger i spelet. Den visar WebGPU eller WebGL2 och om WebXR är tillgängligt.
Jämför labbets scene, camera och renderer med samma namn i main.js. Spelet har fler objekt men samma grundstruktur.

Varför WebXR behöver HTTPS

WebXR:s immersive-vr är en säker webbfunktion. Vanlig http://<Macens-IP>:4323 i Quest Browser är inte tillräckligt. Använd HTTPS från en riktig host eller ADB port reverse så att Quest Browser når appen som http://localhost:4323/. Se kapitel 20.

Källor: Three.js WebGPURenderer, Three.js VRButton, Meta WebXR.