WebVR er en fantastisk måde at skabe dybtgående 3D Virtual Reality-oplevelser i browseren. Det er en eksperimentel specifikation af Javascript API'er og har mange backers og folk skubber det fremad, med Mozilla at være en stor del af det.

Med eksplosionen af ​​VR headsets kommer til markedet og mere i horisonten, er det nu en god tid at eksperimentere og se hvilke fantastiske ting, du kan oprette i WebVR.

Det åbne web bliver en spændende hotbed af VR-oplevelser , herunder andre verdenskrig spil , maleri applikationer og tilbøjelige oplevelser . Da WebVR-teknologien modnes, og VR-udstyr bliver mere tilgængeligt, hvem ved hvilke andre erfaringer folk kan skabe.

Hvad er A-Frame?

Som jeg nævnte Mozilla er en stor drivkraft i WebVR i øjeblikket, og de har bidraget til at skabe A-Frame , en webramme til opbygning af Virtual Reality-oplevelser. Det har siden blomstret ind i et af de største og mest spændende open source-projekter og vokser og udvikler sig hurtigt.

A-Frame er en af ​​de enkleste rammer jeg har haft fornøjelsen af ​​at arbejde med, men de ting, du kan oprette med det, er fantastiske. Det er nemt at komme i gang, let at forstå, og alligevel ekstremt kraftfuldt.

I A-Rammens egne ord:

A-Frame er baseret på toppen af ​​HTML, hvilket gør det nemt at komme i gang. Men A-Frame er ikke bare en 3D-scenediagram eller et markup-sprog; kernen er en kraftfuld enhed-komponent ramme, der giver en declarative, udvidelig og komposibel struktur til Three.js .

Hvorfor skal jeg lave WebVR-indhold?

Lad os få en ting lige: WebVR og A-Frame kan stadig ikke bruges overalt. Denne teknologi går hurtigt, men er stadig ret eksperimentel. WebVR kommer heller ikke til at erstatte den måde, hvorpå vi opbygger hjemmesider i øjeblikket (i det mindste ikke for et stykke tid). Jeg forudser 2D-visninger med normale skærme, og skærme vil stadig være den dominerende måde, vi forbruger indhold i lang tid.

Så jeg tror, ​​at hovedårsagen til at gøre WebVR indhold er for sjovt. Det er en ny og spændende teknologi, og vi kan gøre virkelig, virkelig seje ting med det. Nogle af disse projekter kunne blive klientprojekter, et museum kunne ansætte dig for at skabe en virtuel tur for dem, eller et spil kunne tage afsted og du kunne få penge til det. Men i det store og hele skal vi have det sjovt og skabe spændende ting med WebVR og A-Frame.

Lad os lave noget

Efter min mening er den bedste måde at blive begejstret for en ramme som A-Frame at knække på og bygge noget. Vi skal bygge et ret simpelt Virtual Reality Art Gallery, mens vi introducerer dig til nogle af A-Frame's grundlæggende funktionaliteter.

Kom i gang

Første ting først skal vi have en lokal server. Hvis du allerede har en måde, du gør dette, fantastisk. Hvis ikke, anbefaler jeg at oprette en node server med http-server .

Ok, når du har en lokal server kører, lad os dykke ind i A-Frame.

Vi starter med et grundlæggende HTML-dokument kaldet index.html og indlæser A-Frame-biblioteket i hovedet af dokumentet. A-Frame skal læsses i hovedet, så det er klar, før de brugerdefinerede elementer, vi skal tilføje, er indlæst.

Nu har vi A-Frame indlæst, lad os forberede HTML-dokumentet til en A-Frame-scene. A-Frame er baseret på toppen af ​​HTML og bruger brugerdefinerede elementer til at abstrahere meget af kompleksiteten.

Lad os placere en ind i dokumentet. Alle vores A-Frame-komponenter vil blive tilføjet inden for denne a-scene tag, så dette bliver vores overordnede komponent.

Dette er alt det strukturelle arbejde udført. Ved jeg rigtigt? Super simpelt. Vi har ingen genstande i scenen endnu, men det bliver bare en blank skærm, men vi kan hurtigt tilføje eksemplet objekter fra A-Frame tutorial.

Wow. Ok, måske ikke helt fantastisk, da det bare er nogle former, men hej, i nogle få linjer har vi nogle 3D-objekter, der lastes i WebVR.

Derefter begynder vi at lave vores Virtual Reality Art Gallery.

Downloadning af vores aktiver

Så vi glemmer ikke, slet alt indhold inde fra din scene, så nu skal din fil se sådan ud:

Nu har vi en ren skifer Lad os gå finde en 3D-model til brug.

Der er flere steder online, hvor vi kan downloade modeller, og du kan finde stort set noget, hvis du er villig til at betale for dem. Vi skal hente en model fra Google Blocks galleri.

Google Blocks er en applikation til at skabe 3D-modeller i VR, som er fantastisk i sin egen ret. Galleriet er hvor folk deler deres kreationer og hvor vi downloader "Small Gallery" -modellen fra.

Gå til Google Blocks-side til denne model og klik på download. Dette vil hente en mappe med to filer inde i den; en model.obj og en materials.mtl . Placer disse to filer inde i en mappe kaldet "galleri" og læg denne mappe ved siden af ​​din index.html fil. Vi skal bruge begge disse filer til at gøre modellen korrekt, og vi vil tilføje dem til A-Frame næste.

1 - Google-blokke-side

Dit projekt skal i øjeblikket se sådan ud:

index.htmlgallery/model.objgallery/materials.mtl

Oprettelse af et VR Gallery Space

Nu indlæser vi den model, vi downloadede til vores projekt. A-Frame leveres med indbygget kapitalstyringssystem , som preloads og caches vores aktiver. Dette er en fantastisk funktion, der abstraherer et virkelig vigtigt skridt og gør vores liv meget lettere.

Lad os indlæse vores objekt og vores materiale i aktivloaderen:

Det har brug for en id-attribut, som er, hvordan vi målretter mod hvert aktiv og en src-attribut, hvor vi indlæser filerne.

Nu kan vi føje dette objekt til scenen ved hjælp af enhedselementet. Elementelementet er et af kerneelementerne i A-Frame, og du vil nok bruge det ganske lidt. Da vi bruger det som pladsholder til vores objekt, skal vi faktisk indlæse objektet og materialet ind i det.

Hvis du opdaterer din side, skal du forhåbentlig se modellen i midten af ​​skærmen. Placeringen vil nok være slukket, men du skal kunne se dig rundt. Lad os lave stillingen nu ved at tilføje et kameraelement manuelt og placere det.

Som du kan se, er kameraelementet faktisk en kamerakomponent, der er knyttet til et enhedselement, og vi kan tilføje evnen til at se sig rundt med look-controls-komponenten.

Nu har vi tilføjet kameraelementet lad os placere det. Placering tager tre værdier, en X, Y og Z, og vi starter med at indstille en standard på 0 på hver af disse.

Som du sikkert kan fortælle med det samme, forsøger du at placere en X, Y og Z værdi lige i kode vil være lidt vanskelig og er en opskrift på hovedpine. Heldigvis har vi adgang til en fantastisk A-Frame Inspector til at hjælpe dig med at arbejde på dine VR-oplevelser. Du kan åbne A-Frame Inspector med + + i .

2 - aframe-inspektør

Vi kan klikke på kameraet i listen til venstre og finde positionen kameraet enten med pilene eller egenskaberne i højre hånds menu. Tag en lege med inspektøren og se hvad du kan gøre med det. Du kan lære meget af at ændre egenskaberne og eksperimentere, og det er en af ​​de bedste måder at lære om positionering i 3D-rummet.

Vi vil ende med en position, der centrerer kameraet i rummet og løfter det op lidt, så det er i hovedhøjde. Vi roterer også kameraet, så det vender ud af vinduet ved starten.

Tilføjelse af en velkomstmeddelelse

For at give VR Galleriet lidt mere af en indbydende følelse, tilføjer vi en velkomstmeddelelse ved hjælp af A-Rammens tekstkomponent .

Tilføjelse af tekst er lige så simpelt som at indtaste en værdi i tekstkomponenten, men der er mange ekstra værdier, som også kan ændres. Vi har position og rotation attributter som sædvanlig sammen med nogle tekst tilpasningsmuligheder, såsom skrifttype, justering og farve. Vi har også en, der hedder Side . Side fortæller faktisk A-Frame, hvilken side af teksten der skal gengives. Dette er nyttigt, hvis du kan bevæge dig rundt i din scene og ikke vil se omvendt tekst. Vi er glade for at have det synligt på begge sider.

Så vi har teksten der vises lige foran vinduet, men jeg føler mig stadig ikke velkommen. Lad os tilføje lidt animation til det, så det trækker øjet og gør scenen mere interessant.

4 - tekst-eksempel

Animerer vores velkomstmeddelelse

A-Frame har en kraftfuld animationskomponent, der kan tilsluttes andre komponenter. Vi vedhæfter det ved at nest det inden for det element, vi ønsker at animere. Dette er en rigtig kraftfuld funktion og går langt ud over bare animationer. Vi kan gruppere flere objekter på denne måde. Som et eksempel på hvordan dette kunne bruges, tænk på et heads up display i et spil, eller jorden på en bane omkring solen med månen følgende og roterende rundt om jorden.

Vi vil holde det enkelt i denne tutorial og bare animere teksten. Vi skal vælge en ejendom, vi ønsker at animere og sætte den som attributværdi . Vi skal gøre vores tekst hoppe op og ned, så vi vil redigere positionen. Derefter skal vi fortælle animationen, hvor den animerer denne komponent til - vi vil kun have at flytte lidt op, så vi bør kopiere positionsværdien af ​​den overordnede komponent og justere Y- værdien. Vi kan også indstille lempelser, varigheder, om det løkker og hvordan det løkker. Vi vil gøre vores animation hoppe op og ned ved at løkke på ubestemt tid, mens du veksler retningen hver gang.

Der har vi det. En dejlig velkommen besked, der hopper op og ned.

Her er den fulde kode:

Afslutter

Der har vi det, et Virtual Reality Art Gallery på under 40 linjer. Du har haft en introduktion til de indlæste aktiver ved hjælp af enhedskomponenten med objekter, kameraet, teksten og animationerne. Med disse værktøjer er potentialerne ubegrænsede og sjove.

WebVR er stadig i sin barndom, men allerede ser folk potentialet for gode ting med det. Det er en helt anden måde at opleve indhold på, og det er en spændende tid at blive involveret. A-Frame giver os mulighed for hurtigt at komme ind i det, og få folk til at bruge vores kreationer på tværs af så mange enheder som muligt.