Skapa WebVR-upplevelser med A-Frame
WebVR är ett fantastiskt sätt att skapa underbara 3D Virtual Reality-upplevelser i webbläsaren. Det är en experimentell specifikation av Javascript API och har många backers och människor skjuter framåt, med Mozilla som en stor del av det.
Med explosionen av VR-headset som kommer på marknaden och mer i horisonten är det nu dags att experimentera och se vilka fantastiska saker du kan skapa i WebVR.
Den öppna webben blir en spännande hotbed av VR-upplevelser , Inklusive andra världsliga spel , målningsapplikationer och uppslukande upplevelser . När WebVR-tekniken mognar och VR-utrustningen blir mer tillgänglig vem vet vilka andra erfarenheter människor kan skapa.
Vad är A-Frame?
Tja, som jag nämnde Mozilla är en stor drivkraft i WebVR just nu och de bidrog till att skapa En ram , en webbram för att bygga upp virtuella verklighetsupplevelser. Sedan dess har det blivit ett av de största och mest spännande open source-projekten och växer och utvecklas snabbt.
A-Frame är en av de enklaste ramarna jag har haft nöjet att jobba med, men de saker du kan skapa med det är fantastiska. Det är enkelt att komma igång, lätt att förstå, men ändå extremt kraftfullt.
I A-Frame egna ord:
A-Frame är baserad på HTML, vilket gör det enkelt att komma igång. Men A-Frame är inte bara en 3D-scengraf eller ett spårningsspråk; kärnan är en kraftfull enhetskomponentram som ger en deklarativ, utvidgbar och komposibel struktur till Three.js .
Varför ska jag göra WebVR-innehåll?
Låt oss få en sak rakt: WebVR och A-Frame är fortfarande inte användbara överallt. Denna teknik går snabbt, men är fortfarande ganska experimentell. WebVR kommer inte heller att ersätta hur vi bygger webbplatser för tillfället (åtminstone inte för en stund). Jag förutspår 2D-visningar med normala bildskärmar och skärmar är fortfarande det dominerande sättet att vi konsumerar innehåll under en längre tid.
Så jag tror att huvudorsaken till att göra WebVR-innehåll är för skojs skull. Det är en ny och spännande teknik och vi kan verkligen göra riktigt coola saker med det. Några av dessa projekt kan bli klientprojekt, ett museum kan anställa dig för att skapa en virtuell turné för dem, eller ett spel kan ta av och du kan få pengar för det. Men i huvudsak borde vi ha kul och skapa spännande saker med WebVR och A-Frame.
Låt oss göra någonting
Enligt min åsikt är det bästa sättet att bli upphetsad om ett ramverk som A-Frame att spricka på och bygga upp något. Vi ska bygga ett ganska enkelt Virtual Reality Art Gallery samtidigt som vi introducerar dig till en del av A-Frame-kärnfunktionerna.
Komma igång
Första saker först behöver vi en lokal server. Om du redan har ett sätt du gör det här, bra. Om inte rekommenderar jag att du installerar en nodserver med http-server .
Okej, när du har en lokal server igång, låt oss dyka in i A-Frame.
Vi börjar med ett grundläggande HTML-dokument som heter index.html och laddar A-Frame-biblioteket i huvudet på dokumentet. A-Frame ska laddas i huvudet så att det är klart innan de anpassade elementen vi ska lägga till laddas.
Nu har vi A-Frame laddad, låt oss förbereda HTML-dokumentet för en A-Frame-scen. A-Frame är baserad på HTML och använder Custom Elements för att abstrahera mycket av komplexiteten.
Låt oss placera en
Detta är allt av det strukturella arbetet som utförts. Eller hur? Super enkelt. Vi har inga föremål på scenen än så det kommer bara att vara en tom skärm, men vi kan snabbt lägga till exempelföremål från A-Frame-handledningen.
Wow. Ok, kanske inte helt fantastisk, det är bara några former, men hej, i några rader har vi några 3D-objekt som laddas i WebVR.
Nästa börjar vi göra vårt Virtual Reality Art Gallery.
Nedladdning av våra tillgångar
Så vi glömmer inte, rensa allt innehåll från din scen, så nu ska din fil se ut så här:
Nu har vi en ren skiffer Låt oss hitta en 3D-modell att använda.
Det finns flera platser på nätet där vi kan ladda ner modeller, och du kan hitta ganska mycket om du är villig att betala för dem. Vi kommer att få en modell från Google Blocks galleri.
Google Blocks är en applikation för att skapa 3D-modeller i VR vilket är fantastiskt i sin egen rättighet. Galleriet är där människor delar sina skapelser och där vi kommer att hämta "Small Gallery" -modellen från.
Gå till Google Blocks-sida för den här modellen och klicka på nedladdning. Detta hämtar en mapp med två filer inuti den; en modell.obj och en materials.mtl . Placera dessa två filer i en mapp som heter "galleri" och placera den här mappen bredvid din index.html- fil. Vi behöver båda dessa filer för att göra modellen korrekt och vi lägger dem till A-Frame nästa.
Ditt projekt ska nu se ut så här:
index.htmlgallery/model.objgallery/materials.mtlSkapa ett VR Gallery Space
Nu laddar vi modellen vi laddat ner till vårt projekt. A-Frame levereras med inbyggd kapitalförvaltningssystem , som preloads och caches våra tillgångar. Detta är en bra funktion som abstraherar ett riktigt viktigt steg och gör våra liv mycket enklare.
Låt oss ladda vårt objekt och vårt material till tillgångsladaren:
De
Nu kan vi lägga till det här objektet på scenen med hjälp av entitetselementet. Enhetselementet är ett av kärnelementen i A-Frame och du brukar använda det här ganska lite. Eftersom vi använder det som platshållare för vårt objekt behöver vi faktiskt ladda objektet och materialet i det.
Om du uppdaterar din sida borde du förhoppningsvis se modellen i mitten av skärmen. Placeringen kommer troligen att vara av men du borde kunna titta runt. Låt oss fixa positioneringen nu genom att lägga till ett kameraelement manuellt och placera det.
Som du kan se är kameraelementet faktiskt en kamerakomponent kopplad till ett företagselement och vi kan lägga till möjligheten att titta runt med utseendekontrollelementet.
Nu har vi lagt till kamerans element kan placera det. Positionering tar tre värden, en X, Y och Z och vi börjar med att ställa in en standard på 0 på var och en av dessa.
Som du säkert kan berätta omedelbart, försöker du placera ett X, Y och Z värde bara i kod kommer att vara lite knepigt och är ett recept på huvudvärk. Lyckligtvis har vi tillgång till en fantastisk A-Frame Inspector som hjälper dig att arbeta med dina VR-upplevelser. Du kan öppna A-Frame Inspector med
Vi kan klicka på kameran i listan till vänster och hitta positionen kameran antingen med pilarna eller egenskaperna i högermenyn. Ha en lek med inspektören och se vad du kan göra med det. Du kan lära dig mycket av att ändra egenskaper och experimentera, och det är ett av de bästa sätten att lära dig om positionering i 3D-rymden.
Vi vill sluta med en position som centrerar kameran i rummet och lyfter upp den så att den ligger i huvudhöjd. Vi roterar också kameran så att den står inför fönstret i början.
Lägga till ett välkomstmeddelande
För att ge VR-galleriet lite mer av en välkomnande känsla, lägger vi till ett välkomstmeddelande med hjälp av A-Frames textkomponent .
Att lägga till text är lika enkelt som att skriva in ett värde i textkomponenten, men det finns många extra värden som också kan ändras. Vi har position och rotation attribut som vanligt, tillsammans med vissa text anpassningsalternativ, till exempel typsnitt, justering och färg. Vi har också en som heter Side . Sida berättar faktiskt A-Frame vilken sida av texten som ska göras. Det här är till hjälp om du kan flytta runt din scen och inte vill se omvänd text. Vi är glada att ha det synligt på båda sidor.
Så vi har texten som dyker upp framför fönstret, men jag känner mig fortfarande inte välkommen. Låt oss lägga till lite animering till det, så att det drar ögat och gör scenen mer intressant.
Animera vår välkomstmeddelande
A-Frame har en kraftfull animeringskomponent som kan kopplas till andra komponenter. Vi bifogar det genom att nesta det inom det element vi vill animera. Detta är en väldigt kraftfull funktion och går långt bortom bara animeringar. Vi kan gruppera flera objekt på detta sätt. Som ett exempel på hur detta kan användas, tänk på en heads up-skärm i ett spel, eller jorden på en bana runt solen med månen som följer och roterar runt jorden.
Vi kommer att hålla det enkelt i denna handledning och bara animera texten. Vi måste välja en egenskap vi vill animera och ange som attributvärdet . Vi ska göra vår text studsa upp och ner så vi vill redigera positionen. Nästa måste vi berätta animationen där den animerar den här komponenten till - vi vill bara att den ska gå upp lite, så vi borde kopiera positionsvärdet för den överordnade komponenten och justera Y- värdet. Vi kan också ställa in lättnader, varaktighet, huruvida det slingrar och hur det slingrar. Vi kommer att göra vår animation studsa upp och ner genom att slinga i obestämd tid medan du växlar riktningen varje gång.
Där har vi det. Ett trevligt välkommet meddelande som studsar upp och ner.
Här är den fullständiga koden:
Avslutar
Där har vi det, ett Virtual Reality Art Gallery på under 40 linjer. Du har haft en introduktion till lastningsalternativen, med hjälp av enhetskomponenten med objekt, kameran, texten och animationerna. Med dessa verktyg är potentialen obegränsade och roliga.
WebVR är fortfarande i sin linda men redan ser man potentialen för stora saker med det. Det är ett helt annat sätt att uppleva innehåll och det är en spännande tid att engagera sig. A-Frame ger oss ett sätt att komma in snabbt, enkelt och få människor att använda våra skapelser över så många enheter som möjligt.