Opprette WebVR-opplevelser med A-Frame
WebVR er en fantastisk måte å skape utrolige 3D Virtual Reality-opplevelser i nettleseren. Det er en eksperimentell spesifikasjon av Javascript APIs og har mange backers og folk presser den fremover, med Mozilla som en stor del av det.
Med eksplosjonen av VR-hodesett som kommer til markedet og mer i horisonten, er det nå en fin tid å eksperimentere og se hvilke fantastiske ting du kan lage i WebVR.
Det åpne nettet blir en spennende hotbed av VR-opplevelser , gjelder også andre verdensklasse spill , maler applikasjoner og fordybende opplevelser . Som WebVR-teknologien modnes og VR-utstyr blir mer tilgjengelig, hvem vet hvilke andre erfaringer folk kan skape.
Hva er A-Frame?
Vel som jeg nevnte Mozilla er en stor drivkraft i WebVR for øyeblikket, og de bidro til å skape En ramme , et nettramme for å bygge opp virtuelle virkelighetsopplevelser. Det har siden blomstret inn i en av de største og mest spennende åpen kildekodeprosjektene, og vokser og utvikler seg raskt.
A-Frame er en av de enkleste rammer jeg har hatt gleden av å jobbe med, men de tingene du kan lage med det er fantastiske. Det er enkelt å komme i gang, lett å forstå, og likevel ekstremt kraftig.
I A-Rammens egne ord:
A-Frame er basert på HTML, noe som gjør det enkelt å komme i gang. Men A-Frame er ikke bare en 3D-scenediagram eller et opptakspråk; kjernen er et kraftig enhetskomponentramme som gir en deklarativ, utvidbar og sammensatt struktur til Three.js .
Hvorfor skal jeg lage WebVR-innhold?
La oss få en ting rett: WebVR og A-Frame er fortsatt ikke brukbare overalt. Denne teknologien beveger seg fort, men er fortsatt ganske eksperimentell. WebVR kommer heller ikke til å erstatte måten vi bygger nettsteder for øyeblikket (i hvert fall ikke for en stund). Jeg forutsier 2D-visninger med normale skjermer og skjermbilder vil fortsatt være den dominerende måten vi bruker innhold på lenge.
Så jeg tror at hovedgrunnen til å gjøre WebVR-innhold er for moro skyld. Det er en ny og spennende teknologi, og vi kan virkelig lage, virkelig kule ting med den. Noen av disse prosjektene kan bli klientprosjekter, et museum kan leie deg for å lage en virtuell tur for dem, eller et spill kan ta av og du kan få penger for det. Men i hovedsak bør vi ha det gøy og skape spennende ting med WebVR og A-Frame.
La oss gjøre noe
Etter min mening er den beste måten å bli begeistret for et rammeverk som A-Frame, å knekke på og bygge noe. Vi skal bygge et ganske enkelt Virtual Reality Art Gallery mens du introduserer deg til noen av kjernevolumet til A-Frame.
Starter
Første ting først, vi trenger en lokal server. Hvis du allerede har en måte du gjør dette, flott. Hvis ikke, anbefaler jeg at du konfigurerer en nodeserver med http-serveren .
Ok, når du har en lokal server kjører, la oss dykke inn i A-Frame.
Vi starter med et grunnleggende HTML-dokument kalt index.html, og laster inn A-Frame-biblioteket i hodet på dokumentet. A-Frame skal lastes i hodet slik at det er klart før de egendefinerte elementene vi skal legge til, er lastet.
Nå har vi A-Frame lastet, la oss forberede HTML-dokumentet for en A-Frame-scene. A-Frame er basert på HTML, og bruker egendefinerte elementer til å abstrahere mye av kompleksiteten.
La oss plassere en
Dette er alt det strukturelle arbeidet som er gjort. Jeg vet, ikke sant? Super enkel. Vi har ingen objekter i scenen ennå, men det skal bare være et tomt skjermbilde, men vi kan raskt legge til eksempelobjektene fra A-Frame-opplæringen.
Wow. Ok, kanskje ikke helt fantastisk som det er bare noen figurer, men hei, i noen få linjer har vi noen 3D-objekter lastet inn i WebVR.
Deretter begynner vi å lage vårt Virtual Reality Art Gallery.
Nedlasting av våre eiendeler
Så vi glemmer ikke, fjern alt innholdet fra din scene, så nå skal filen se slik ut:
Nå har vi en ren skifer, la oss gå, finn en 3D-modell å bruke.
Det er flere steder på nettet der vi kan laste ned modeller, og du kan finne stort sett alt hvis du er villig til å betale for dem. Vi skal få en modell fra Google Blocks-galleriet.
Google Blocks er et program for å lage 3D-modeller i VR som er fantastisk i sin egen rettighet. Galleriet er hvor folk deler sine kreasjoner og hvor vi skal laste ned "Small Gallery" -modellen fra.
Hodet til Google Blocks-siden for denne modellen og klikk på nedlasting. Dette vil laste ned en mappe med to filer inni den; en modell.obj og en materials.mtl . Plasser disse to filene i en mappe som heter "galleri" og legg denne mappen ved siden av index.html filen. Vi trenger begge disse filene for å gjengi modellen riktig, og vi legger dem til A-Frame neste.
Ditt prosjekt bør nå se slik ut:
index.htmlgallery/model.objgallery/materials.mtlOpprette et VR Gallery Space
Nå laster vi inn modellen vi lastet ned i prosjektet vårt. A-Frame leveres med innebygd kapitalforvaltningssystem , som preloads og caches våre eiendeler. Dette er en flott funksjon som abstrakterer et virkelig viktig skritt og gjør livet enklere.
La oss laste vårt objekt og vårt materiale inn i eiendellaster:
De
Nå kan vi legge til dette objektet på scenen ved å bruke elementelementet. Elementelementet er en av kjerneelementene i A-Frame, og du vil nok bruke dette ganske mye. Når vi bruker det som plassholder for objektet, må vi faktisk laste objektet og materialet inn i det.
Hvis du oppdaterer siden din, bør du forhåpentligvis se modellen i midten av skjermen. Plasseringen vil trolig være av, men du bør kunne se deg rundt. La oss fikse posisjoneringen nå ved å legge til et kameraelement manuelt og plassere det.
Som du kan se kameraelementet, er det faktisk en kamerakomponent som er festet til et entitetselement, og vi kan legge til muligheten til å se deg rundt med utseendekontrollelementet.
Nå har vi lagt til kameraelementet, la oss plassere det. Posisjonering tar tre verdier, en X, Y og Z, og vi starter med å angi en standard på 0 på hver av disse.
Som du sikkert kan fortelle med en gang, prøver du å plassere en X, Y og Z verdi bare i kode vil være litt vanskelig og er en oppskrift på hodepine. Heldigvis har vi tilgang til en fantastisk A-Frame Inspector for å hjelpe deg med å jobbe med dine VR-opplevelser. Du kan åpne A-Frame Inspector med
Vi kan klikke på kameraet i listen til venstre og finne posisjonen kameraet enten med pilene eller egenskapene i høyrehåndsmenyen. Ha en lek med inspektøren og se hva du kan gjøre med det. Du kan lære mye av å endre egenskapene og eksperimentere, og det er en av de beste måtene å lære om posisjonering i 3D-plassen.
Vi ønsker å ende opp med en posisjon som sentrerer kameraet i rommet og løfter det opp litt, så det er i hodehøyde. Vi vil også rotere kameraet slik at det vender ut av vinduet ved starten.
Legge til en velkomstmelding
For å gi VR-galleriet litt mer en innbydende følelse, legger vi til en velkomstmelding ved hjelp av A-Rammens tekstkomponent .
Å legge til tekst er like enkelt som å skrive inn en verdi i tekstkomponenten, men det er mange tilleggsverdier som også kan endres. Vi har posisjon og rotasjonsattributter som vanlig, sammen med noen teksttilpasningsalternativer, for eksempel skrift, justering og farge. Vi har også en kalt Side . Side forteller faktisk A-Frame hvilken side av teksten som skal gjengis. Dette er nyttig hvis du kan bevege deg rundt scenen din og ikke vil se omvendt tekst. Vi er glade for å ha det synlig på begge sider.
Så vi har teksten som dukker opp rett foran vinduet, men jeg føler meg fortsatt ikke velkommen. La oss legge til litt animasjon for det, slik at det trekker øynene og gjør scenen mer interessant.
Animerer vår velkomstmelding
A-Frame har en kraftig animasjonskomponent som kan festes til andre komponenter. Vi legger det ved å nesting det innenfor elementet vi ønsker å animere. Dette er en veldig kraftig funksjon og går langt utover bare animasjoner. Vi kan gruppere flere objekter på denne måten. Som et eksempel på hvordan dette kan brukes, tenk på en heads up skjerm i et spill, eller jorden på en bane rundt solen med månen som følger og roterer rundt jorden.
Vi skal holde det enkelt i denne opplæringen og bare animere teksten. Vi må velge en eiendom vi ønsker å animere og sette den som attributtverdien . Vi skal gjøre vår tekst sprette opp og ned, så vi vil redigere stillingen. Deretter må vi fortelle animasjonen hvor den animerer denne komponenten til - vi vil bare at den skal bevege seg litt, så vi bør kopiere posisjonsverdien til den overordnede komponenten og justere Y- verdien. Vi kan også angi lempelser, varighet, om det løper og hvordan det sløyfer. Vi skal gjøre vår animasjon sprette opp og ned ved å løpe ubestemt mens du veksler retningen hver gang.
Der har vi det. En hyggelig velkomstmelding som hopper opp og ned.
Her er den fulle koden:
Wrapping Up
Der har vi det, et Virtual Reality Art Gallery på under 40 linjer. Du har hatt en introduksjon til lastingstillatene, ved hjelp av enhetskomponenten med objekter, kameraet, teksten og animasjonene. Med disse verktøyene er potensialene ubegrensede og morsomme.
WebVR er fortsatt i barndommen, men allerede ser folk potensialet for gode ting med det. Det er en helt annen måte å oppleve innhold på, og det er en spennende tid å bli involvert. A-Frame gir oss en måte å komme inn på raskt, enkelt og få folk til å bruke våre kreasjoner på så mange enheter som mulig.