Etter to kapitler (5 og 6) med mye lys og kamera, er det på tide med en lab om lys og kamera.

LAG BOKSER (NOE Å SE PÅ)

Vi tar utgangspunkt i en scene med 7 tilfeldig plasserte bokser, ikke ulik den fra forrige ukes lab; du finner den i Filer som lagboks.html.

Kopier denne til kamera1.html. Sjekk at det virker. Boksene skal stå innenfor (-5,5) i de tre dimensjoner.
For øvelsens skyld, skill bokslagingen ut i egen lagbokser.js som inkluderes fra kamera1.html med <script src="lagbokser.js">.
Plasser gjerne en rød boks i midten (origo) som referanse.

KAMERA

Her er en rekke øvelser. Vi tar de første i labtimen, mens de på slutten er for de som vil prøve seg hjemme.

https://aframe.io/docs/1.0.0/components/camera.html

Start kamera1.html. Hvor står standardkameraet? Kan posisjon endres?
1. Hvor er "blikket" rettet? Kan blikket endres?
2. Hvor stort er "field of view" (synsfeltet)? Kan det endres?
3. Hvilke andre attributt har kameraet (og hva betyr de?)
Endre startposisjonen i kameraet, slik at det står 10 meter foran de 7 boksene (sentrert i origo), så vi skal nå se alle 7 boksene. Husk, boksene ble plassert innenfor (-5,5) på alle 3 aksene.
Endre, slik at kameraet går uavbrutt opp og ned fra y=-5 til y=+5 på 8.5 sekund. Bruk komponenten "animation=..." med "to" og "from". https://aframe.io/docs/1.0.0/components/animation.html (OBS: Animasjon med "animation=..." fungerer i VR-modus, men er ikke helt frisk i Visual Developer, mulig en må trykke på pila (startknapp) for å få en runde med animasjon. Skal du ha to runder må du reloade ... hvis noen finner ut av dette, si fra)
Endre, slik at kameraet på 10 sekund har rotert 360 grader rundt sitt eget midtpunkt
Endre, slik at kameraet går i en bane rundt origo, 10 meter unna. Hint: Gjør det som skal gå i bane (kameraet) til et barn av en roterende entitet med posisjon (0,0,0). Verifiser at at kameraets blikk er på origo (0,0,0)
Endre, slik at kameraets bane ikke bare er rundt y, men også 180 grader rundt x og 90 grader rundt z. Verifiser at rotasjonen ikke er hele veien rundt, samt at kameraet hele tiden "stirrer" inn mot origo.
Endre, slik at kameraet står i ro, 10 meter foran de 7 boksene (som i oppgave 5), og at det i stedet er de 7 boksene som går i bane rundt origo. Hint: Bruk samme hint som i forrige: Plasser det som skal gå i bane (7 bokser) inn som barn til en egen entitet, fex "bokseentitet", og få bokseentiteten til å rotere; da vil enkeltboksene følge med.
Ta kameraet fra oppgave 5), og legg til et som står 10 meter rett over scenen med blikket vendt mot origo. Det skal stå "Kamera 1" og "Kamera 2" i hvert kamera sitt HUD, med hhv gul og grønn farge.
Gjør slik at det veksles mellom de to kameraene hvert tredje sekund ved å bruke det boolske "active". Tips: Har forsøkt med animation="property:active; from:true, to:false; dur:3000; dir:alternate" slik anbefalt i https://aframe.io/docs/1.0.0/components/animation.html (under "Boolean values"), men ikke lyktes. Gikk greit med JS med swap ala: tmp=a; a=b; b=tmp).

CURSOR

For å markere hvor kameraet peker, legg inn en a-cursor som barn til a-camera. En liten ring angir kameraets blikk.

Ta kopi av den koden der mange bokser som snurrer. Legg til cursor. Du skal kunne se denne ringen.
Legg inn en grønn teller i HUD, initielt 0. Sjekk at den vises.
Lag en komponent "innom" som øker teller for hver "mouseenter" event. Legg "innom" på boksene.
Endre innom slik at den også sletter boksen.
Endre slik at det hele tiden lages nye bokser (ikke stopp på 7)
Endre HUD slik at det viser "N: <ant bokser>\nX: <ant treff>". Husk å endre HUD hver gang N eller X endres.

Lastet opp til glitch, så en kan kjøre det fra VR-maskina og prøve Oculusen. Nå nærmer det seg et spill. God trim for nakken kjenner jeg.

https://glitch.com/edit/#!/abyssinian-glorious-yuzu?path=cursor1.html%3A60%3A0