Forrige uke var det markørbasert AR. Denne uka blir det lokasjonsbasert.

OPPSUMMERING ETTER LAB:

Å finne og å bruke GPS gikk greit (usikker på høyde/z i kantina, 3 etasjer)
Hentet inn 3D modell (magnemite) og pakke ut til assets lokalt
- vil ikke kunne hentes fra file:// -- må hentes fra localhost, sky e.l.
Fikk til "python -m http.server" og laste inn 3D model fra localhost:8000
- fikk ikke til å laste modellen opp til glitch
- venter på svar fra IT-senteret om å bruke home.himolde.no/~<studnr> (M:/
- fikk ikke til github (men skal gå)
Fikk til animation og src av komponenten.

Hva ar.js sier

https://github.com/AR-js-org/AR.js

Legg koden i "Location based example" inn i boiler-ar.html, se om det virker. Mulig https://www.latlong.net/ er til hjelp.

Endel nytt og ukjent her.

look-at? -- vil vri noe mot et annet https://supermedium.com/superframe/components/look-at/.

Nicolos artikkel

Artikkel av Nicolò Carpignoli (en av AR-gjengen): https://medium.com/chialab-open-source/build-your-location-based-augmented-reality-web-app-c2442e716564z

Kopier template til boiler-ar2.html, kan evt bytte til 1.0.4 i src= (den er omtrent lik den over fra ar.js)

(tror denne template har mer enn strengt tatt nødvendig, men tør ikke fjerne noe)

Lag kopi ar1.html og legg inn noe enkelt fex a-text (som over), eller a-box i nærheten av deg. Sjekk at den vises.

<a-box gps-entity-place="longitude: 12.489820; latitude: 41.892590;"> </a-box>

Når dette virker kan du arkivere ar1, evt senere forsøke å fjerne diverse element og attributt i ar1.html, for å se hva som egentlig trengs.

Jeg tror tredje src= kan fjernes (aframe-extras) da dette kun brukes når en tar inn modeller utenfra.

Importer modell

Kopier boiler-ar.html til ar2.html.

Dette har egentlig ikke noe med AR å gjøre, men det er greit å få prøvd modellimport.

Hent inn magnemite 3D-modell. Må serves fra server, fex localhost:// (ikke file://) pga angst.

Tror https:// også er viktig.

Du kan bruke WAMPen (c:\wamp64\www, lag undermappe aframe) og localhost://aframe/ar2.html.

Eller Glitch. Eller Github.

Eller installere Pythonserveren (Mongoose) som A-Frame anbefaler: https://aframe.io/docs/1.0.0/introduction/installation.html

For å prøve: Legg inn denne i ei scene (trenger ikke være AR).

<a-entity 
   gltf-model="assets/magnemite/scene.gltf" 
> </a-entity>

Skal du se dette som lokasjonsbasert AR: Legg til koordinat.

<a-entity 
gltf-model="assets/magnemite/scene.gltf" 
gps-entity-place="longitude: 12.489820; latitude: 41.892590;" 
animation-mixer/>

Tror animation-mixer kreves for å se animasjonen (i GLTF-modellen)?

For å få det frem på mobil må du nesten sikkert laste det opp på en 3de parts server (github e.l.)

La Javascript lage modellen

Dette kan vi ta hvis det er godt med tid. Det er det vanligvis ikke.

Uansett: Vi er jo godt kjent med å la program generere scenen.

Denne koden er interessant, da den bruker diverse varianter i Javascript som er greit å kjenne til.

Bl.a. brukes window.onload, en event som trigges når winduet er ferdig opptegnet.

Først leses koordinatene, dernest tegnes modellen (med koordinatene).

Koordinatene er lagt inn i et Javascript object (dot-notasjon).

document.querySelector( søkeuttr ) søker opp element basert på søkeuttr (se https://www.w3schools.com/jsref/met_document_queryselector.asp)

places.forEach ( (place) => ...) er en annen måte å lage forløkke på. Kalles iterator. Kunne like godt brukt vanlig (for i=0; i<places.length; i++) ...

Strenger laget med "backtick" lar en sette inn uttrykk i ${...}. Se https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals, kunne evt brukt vanlig "..." + "..."

let/var: let sikrer lokalt scope (https://www.w3schools.com/js/js_let.asp)

Usikker på hensikten med dispatchEvent: Kjøres når GLTF-modellen er lastet inn ("loaded"), og vil sende ut en "gps-entity-place-loaded" event (men hvor? til hvem?)

Legg inn en ekstra plass (fex kantina) og sjekk om det henger en slik omtrent der.

Rund knapp

Burde få tid til dette: Tanken er at en kan bytte modell ved å trykke på knapp. Javel?

Her brukes CSS, et stilark som vanligvis legges til egen fil (her: style.css).

Ser også src=script.js, lurer på hva som ligger der?

Knappen legges i DIV (også det nytt), som legges i klasse "centered" (er vel nytt).

Det er stilarket som styler klassene "centered" og "instructions" (?), såvel som alle "button",

Vi har brukt id="" for ett enkelt element, men med class="" kan en justere alle i en klasse med en instruks. Akkurat her er det jo bare en ... men, viktig mekanisme i JS/CSS.

Må laste ned to ekstra modeller.

Antar at det vil by på problemer å få til dette i løpet av de to timer med lab.

Koordinater fra nettet

Dette vil ta for lang tid å gjøre. Men ser artig ut. Bruker a-link med href= som synlige lenker.