WebVR er ótrúleg leið til að búa til gríðarlega 3D Virtual Reality reynslu í vafranum. Það er tilraunapróf um Javascript API og hefur mikið af stuðningsmönnum og fólki að ýta því áfram, þar sem Mozilla er stór hluti þess.

Með sprengingunni á VR heyrnartólum sem koma til markaðarins og meira á sjóndeildarhringnum er nú frábær tími til að gera tilraunir og sjá hvað frábæra hluti sem þú getur búið til í WebVR.

Opinn vefurinn er að verða spennandi heitur sængur af VR reynslu , þar á meðal aðrar leiki , málverk forrit og niðurdrepandi reynslu . Eins og WebVR tækni þroskast og VR búnaður verður aðgengilegri sem þekkir hvaða aðrar reynslu fólk getur búið til.

Hvað er A-Frame?

Jæja eins og ég sagði Mozilla er stór drifkraftur í WebVR í augnablikinu og þeir hjálpuðu til að búa til A-Frame , vefur ramma til að byggja upp raunveruleg raunveruleika reynslu. Það hefur síðan blossomed í eitt af stærstu og spennandi opinn uppspretta verkefnum og er að vaxa og þróast fljótt.

A-Frame er ein einföldu ramma sem ég hef haft ánægju af að vinna með, en það sem þú getur búið til með það er ótrúlegt. Það er einfalt að fara, auðvelt að skilja, og samt mjög öflugt.

Í eigin orðum A-Frame:

A-Frame er byggt ofan á HTML, sem gerir það einfalt að byrja. En A-Frame er ekki bara 3D vettvangur graf eða markup tungumál; Kjarninn er öflugur einingarþáttur ramma sem veitir yfirlýsing, útbreiddan og túlkanlega uppbyggingu til three.js .

Af hverju ætti ég að gera WebVR innihald?

Við skulum fá eitt atriði beint: WebVR og A-Frame eru enn ekki nothæfir alls staðar. Þessi tækni er að flytja hratt, en er enn frekar tilraunaleg. Einnig mun WebVR ekki skipta um hvernig við byggjum vefsíður í augnablikinu (að minnsta kosti ekki um stund). Ég spá fyrir um 2D skoðanir með eðlilegum skjái og skjár mun enn vera ríkjandi leiðin til að neyta efni í langan tíma.

Þannig að ég held að aðalástæðan fyrir því að WebVR innihald sé skemmtilegt. Það er ný og spennandi tækni og við getum gert raunverulega, virkilega flottar hluti með það. Sum þessara verkefna gætu orðið viðskiptavinarverkefni, safnið gæti leigt þig til að búa til sýndarferð fyrir þá eða leik gæti tekið af og þú gætir fengið peninga fyrir það. En í meginatriðum ættum við að skemmta okkur og skapa spennandi hluti með WebVR og A-Frame.

Við skulum gera eitthvað

Að mínu mati er besta leiðin til að verða spennt um ramma eins og A-Frame er að sprunga á og byggja upp eitthvað. Við ætlum að byggja upp nokkuð einfalt Virtual Reality Art Gallery meðan þú kynnir þér nokkrar af helstu virkni A-Frame.

Að byrja

Fyrstu hlutirnir fyrst þurfum við staðbundna miðlara. Ef þú hefur þegar fengið leið sem þú gerir þetta, frábært. Ef ég mæli ekki með að setja upp hnútmiðlari með http-miðlara .

Allt í lagi, þegar þú hefur staðbundna miðlara í gangi, skulum við kafa inn í A-Frame.

Við munum byrja með grunn HTML skjali sem heitir index.html og hlaða A-Frame bókasafninu í höfuðið á skjalinu. A-Frame ætti að hlaða í höfuðið þannig að það sé tilbúið áður en sérsniðin atriði sem við ætlum að bæta við eru hlaðin.

Nú höfum við A-Frame hlaðinn, við skulum undirbúa HTML skjalið fyrir A-Frame umhverfi. A-Frame er byggt ofan á HTML og notar sérsniðnar þættir til að draga úr margbreytileika.

Við skulum setja inn í skjalið. Allar A-Frame hluti okkar verða bætt við í þessum A-vettvangi tagi þannig að þetta verður foreldri hluti okkar.

Þetta er allt skipulagsvinna. Ég veit rétt? Super einfalt. Við höfum engar hluti í vettvangi ennþá svo það verður bara að vera autt skjár en við getum bætt dæmi um hluti úr A-Frame handbókinni fljótt.

Vá. Allt í lagi, kannski ekki alveg frábært þar sem það eru bara nokkrar gerðir, en hæ, í nokkrum línum höfum við nokkrar 3D hlutir hlaðnir í WebVR.

Næstum munum við byrja að búa til listasafnið okkar Virtual Reality.

Sæki eignir okkar

Þannig að við gleymum ekki að hreinsa allt innihaldið innan frá vettvangi þínu, þannig að skráin þín ætti að líta svona út:

Nú erum við með hreint ákveða, við skulum fara að finna 3D líkan til að nota.

Það eru nokkrir staðir á netinu þar sem við getum sótt módel og þú getur fundið nokkuð mikið ef þú ert tilbúin að borga fyrir þau. Við ætlum að fá fyrirmynd frá Google Blocks galleríinu.

Google blokkir er forrit til að búa til 3D módel í VR sem er frábært í eigin rétti. Myndasafnið er þar sem fólk deilir sköpun sinni og þar sem við munum sækja "Small Gallery" líkanið frá.

Höfuð til Google Blocks síðu fyrir þetta líkan og smelltu á niðurhal. Þetta mun hlaða niður möppu með tveimur skrám inni í henni; a model.obj og efni.mtl . Settu þessar tvær skrár í möppu sem heitir "gallerí" og settu þessa möppu við hliðina á index.html skránum þínum. Við munum þurfa báðar þessar skrár til að gera líkanið rétt og við munum bæta þeim við í A-Frame næstu.

1 - Google-blokkir-síðu

Verkefnið þitt ætti að líta svona út:

index.htmlgallery/model.objgallery/materials.mtl

Búa til VR Gallery Space

Nú munum við hlaða fyrirmyndinni sem við sóttum inn í verkefnið okkar. A-Frame kemur með innbyggðri inn eignastýringarkerfi , sem preloads og caches eignir okkar. Þetta er frábær eiginleiki sem dregur frá sér mjög mikilvægt skref og gerir líf okkar miklu auðveldara.

Við skulum hlaða hlutinn okkar og efni okkar í eignaheimildina:

The Þarfnast auðkenni persónunnar sem er hvernig við munum miða á hverja eign og src eigindi sem er þar sem við hleðum skrám.

Nú getum við bætt þessum hlut við vettvang með því að nota einingarnar. Einingin er ein af grundvallarþáttum A-Frame og þú munt líklega nota þetta svolítið. Eins og við notum það sem stað fyrir hlutinn okkar, þurfum við í raun að hlaða hlutinn og efni inn í það.

Ef þú endurnýjar síðuna þína ættir þú vonandi að sjá líkanið í miðju skjásins. Staða verður líklega slökkt en þú ættir að geta skoðað. Við skulum laga staðsetninguna núna með því að bæta myndavélinni við handvirkt og staðsetja það.

Eins og þú sérð er myndavélin frumefni í raun myndavél hluti sem tengist einingu frumefni og við getum bætt við hæfileikanum til að líta í kringum útlitsstýrið.

Nú höfum við myndavélareiningin bætt við leyfir að setja hana. Staðsetningin tekur þrjá gildi, X, Y og Z og við byrjum með því að stilla sjálfgefið 0 á hverju þeirra.

Eins og þú getur sennilega sagt strax, að reyna að staðsetja X, Y og Z gildi bara í kóða verður svolítið erfiður og er uppskrift fyrir höfuðverk. Til allrar hamingju höfum við aðgang að ógnvekjandi A-Frame Inspector til að hjálpa þér að vinna á VR reynslu þína. Þú getur opnað A-Frame Inspector með + + ég .

2 - aframe-skoðunarmaður

Við getum smellt á myndavélina á listanum til vinstri og fundið stöðu myndavélarinnar annaðhvort með örvarnar eða eiginleikum í hægri hönd valmyndinni. Hafa leikrit með skoðunarmanni og sjáðu hvað þú getur gert við það. Þú getur lært mikið af því að breyta eiginleikum og gera tilraunir og það er ein besta leiðin til að læra um staðsetningu í 3D rúminu.

Við viljum endar með stöðu, sem miðar myndavélinni í herbergið og lyfti það upp örlítið þannig að það sé á höfuðhæð. Við munum líka snúa myndavélinni svo að hún snúi út úr glugganum í upphafi.

Bæti Velkomin skilaboð

Til að gefa VR-galleríinu aðeins meira velkomið, munum við bæta við velkomnum skilaboðum með því að nota textahluta A-Frame .

Að bæta við texta er eins einfalt og að slá inn gildi í textahlutann, en það eru margar viðbótargildi sem hægt er að breyta líka. Við höfum stöðu og snúning eiginleika eins og venjulega, ásamt nokkrum valkostum til að breyta texta, svo sem letur, röðun og lit. Við höfum einnig einn sem heitir Side . Side segir í raun A-ramma hvaða hlið textans er að gera. Þetta er gagnlegt ef þú getur flett í kringum vettvang þinn og vilt ekki sjá afturkallað texta. Við erum ánægð með að hafa það sýnilegt á báðum hliðum.

Svo höfum við textann sem birtist bara fyrir framan gluggann, en ég er samt ekki ánægður. Við skulum bæta smá hreyfimyndum við það, þannig að það vekur augað og gerir svæðið áhugavert.

4 - texti-dæmi

Hreyfimöguleika okkar

A-Frame hefur öfluga fjör hluti sem hægt er að tengja við aðra hluti. Við festum það með því að nesta það innan þáttarins sem við viljum aðlaga. Þetta er mjög öflugur eiginleiki og fer langt út fyrir bara fjör. Við getum hópað saman marga hluti á þennan hátt. Sem dæmi um hvernig hægt væri að nota þetta, hugsa um að horfa upp í skjá eða í jörðinni á sporbraut um sólina með tunglinu og snúa um jörðina.

Við ætlum að halda því einfalt í þessari einkatími og bara laga textann. Við verðum að velja eign sem við viljum aðlaga og setja það sem eigindalegt gildi. Við ætlum að gera texta okkar hopp upp og niður svo við viljum breyta stöðu. Næstum við þurfum að segja fjörið þar sem það er að hreyfa þessa hluti til - við viljum aðeins að það fari upp örlítið þannig að við ættum að afrita staðsetningargildi móðurhlutans og stilla Y- gildi. Við getum einnig sett slökun, lengd, hvort það lykkjur og hvernig það lykkjur. Við ætlum að gera fjör okkar hopp upp og niður með lykkju á eilífu meðan skipt er um stefnu í hvert skipti.

Þar höfum við það. Góð velkomin skilaboð sem hoppar upp og niður.

Hér er fullt númerið:

Klára

Þar höfum við það, myndlistarsvæði raunverulegra veruleika á undir 40 línum. Þú hefur fengið kynningu á hleðslu eignum með því að nota einingaþáttinn með hlutum, myndavélinni, texta og hreyfimyndum. Með þessum verkfærum eru möguleikarnir endalausir og skemmtilegir.

WebVR er enn í fæðingu en þegar fólk er að sjá möguleika á því að gera það með góðu hlutum. Það er allt öðruvísi leið til að upplifa efni og það er spennandi tími til að taka þátt. A-Frame gefur okkur leið til að komast inn í það fljótt, auðveldlega og fá fólk að nota sköpun okkar á eins mörgum tækjum og mögulegt er.