3. Förstå 3D-rummet och scenhierarkin

Målet

Kunna placera saker utan att gissa. Three.js använder X i sidled, Y uppåt och Z framåt/bakåt i vår bana. I level.js byggs den fysiska miljön; i main.js skapas spelaren och objekten.

Koordinater och meter

position.set(x, y, z) flyttar ett objekt. Startpunkten är ungefär (0, 0, 0). En kamerahöjd på 1.65 motsvarar ögonhöjd. Ett golv på y = -0.08 med tjockleken 0.16 får ovansidan på y = 0.

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x70d8b0 })
);
cube.position.set(2, 0.5, -3);
scene.add(cube);

Kubens mitt ligger på Y = 0,5 och dess nedre kant på Y = 0. Det är därför den ser ut att stå på golvet. Om du placerar mitten på Y = 0 sjunker halva kuben ner.

Förälder och barn

I spelet ligger kameran inuti gruppen rig. När rig flyttas följer kameran med. Pistolen är i sin tur barn till kameran på desktop, så den stannar i spelarens synfält. I VR är pistolen i stället barn till den högra kontrollen.

scene
└── rig                 spelarens position i världen
    ├── camera          ögonens höjd och riktning
    │   └── desktopPistol
    └── XR-controller   handens position i VR
        └── xrPistol

Ett barns position är lokal i förhållande till sin förälder. Om du behöver den verkliga positionen i scenen använder du getWorldPosition(...). Det är precis vad magasininföringen gör när avståndet mellan handen och pistolen mäts.

Rotation och riktning

Three.js räknar rotation i radianer. Ett halvt varv är Math.PI, ett kvarts varv Math.PI / 2. Vi roterar spelarriggen kring Y för att svänga horisontellt, medan kamerans X-rotation används för att titta upp och ned på desktop. Om både rigg och kamera vrids slumpmässigt kan kontrollerna kännas omvända.

Gör själv

Placera en andra kub i din labbscen på (2, 0.5, -3) och en tredje på (-2, 0.5, -3).
Flytta kameran till (0, 1.65, 5). Förutsäg vilken kub som syns till vänster.
Lägg två kuber i en THREE.Group, flytta gruppen en meter åt höger och notera att båda följer med.
Öppna makeDoor() i main.js. Hitta hinge-gruppen och förklara varför dörrbladet läggs i den, i stället för att rotera kring sitt eget centrum.

Klart när: du kan rita en enkel trädstruktur för scenen och skilja på lokal position och världsposition.