Kuidas oma esimest VR-i rakendust luua koos rakendustega ViroReact, React Native ja Crowdbotics

Looge lihtne VR-rakendus koos stseenide, 3D-teksti ja PhotoSphere'iga.

Virtuaalne reaalsus (VR) on ümbritsev tehnoloogia, mille eesmärk on parandada kogemusi, pakkudes kolmemõõtmelist realistlikku keskkonda, mis võimaldab inimesel end tõeliselt tunda. Selle tehnoloogia rakendused on piiritu. Leiate täiesti ümbritsevaid ja meelelahutuslikke mängurakendusi, samuti näiteid tervishoiuteenuste simulatsioonide kohta, mida kasutatakse inimelude päästmiseks.

React Native arendajatele teeb selle tehnoloogia kättesaadavaks kolmanda osapoole platvorm nimega ViroReact. See platvorm võimaldab React Native arendajatel kiiresti luua platvormidevahelisi AR / VR-rakendusi. ViroReact toetab praegu ARKit, ARCore, VR Cardboard, Gear VR ja Daydream. Viro Meedia

Selles õpetuses aitame teil läbi viia väikese installimis- ja häälestamisprotseduuri koos installimis- ja seadistusprotsessiga ning mõista selle tagamaid.

Ülevaade

  • Alustamine: seadistamine ja installimine
  • Mis on ViroReact?
  • Rakenduse loomine
  • Stseenid ja tekst VR-rakenduses
  • 3D-efekti lisamine teksti
  • 360 PhotoSphere lisamine
  • Järeldus

Alustamine: seadistamine ja installimine

Alustamiseks kasutame Crowdbotics App Builderi loodud projekti React Native. Crowdboticsi abil projekti genereerimiseks on vaja ainult sisselogimisjuurdepääsu kas teie isikliku e-posti kaudu või Githubi profiili kaudu (soovitatav).

Kui olete sisse loginud, valige rakenduse loomise lehel Mobiilirakenduse alt reaalajas mall.

Lõpuks valige selle lehe allosas oma malli nimi ja klõpsake siis nuppu Loo minu rakendus !. Mõne hetke pärast genereeritakse teie projekt. Kui otsustasite juurdepääsu Githubi kaudu, saate kutse Cithdbotics teenuse loodud Githubi hoidlasse. Kloonige hoidla oma dev-masinas praegu.

Edasiseks jätkamiseks peate oma dev-masinasse olema juba installitud järgmised.

  • Node.js
  • valvemeeskond (ainult OSX / Linux)
  • Python2, JDK (ainult aknad)
  • ngroki pakett, mis on installitud globaalse moodulina
  • reageerima-natiiv-kl
  • reageerima-viro-kl

Mõlemate käsuridade installimiseks avage terminaliaken ja käivitage järgmine käsk.

Pärast installimist veenduge, et teil oleks react-viro-cli uusim versioon, mis oleks selle õpetuse kirjutamise ajal 2.13.0. Installitud versiooni kontrollimiseks käivitage react-viro-cli --version.

Liikuge kloonitud Githubi hoidlas. Kui olete sees, kustutage kogu sisu, välja arvatud järgmised failid.

  • .git kataloog
  • .gitattributes
  • .gitignore

Selle põhjuseks on see, et juba olemasoleva React Native rakenduse integreerimine Viro Reactiga ei tööta päris hästi, nagu ka ette nähtud. Niisiis, me läheme teisiti. Pärast failide kustutamist looge react-viro cli abil uus projekt, millel on vaikimisi integratsioonitugi.

Vaikimisi kasutab react-viro-cli projekti sõltuvuste installimiseks lõnga. Pärast seda toimingut saate projektikataloogi struktuuri sarnaselt järgmisele.

Mis on ViroReact?

ViroReact on platvorm, mis aitab teil luua AR (liitreaalsus) ja VR (virtuaalne reaalsus) rakenduselamusi. See kasutab ARKitit ja ARCore'i konkreetsete mobiiliplatvormide, nagu iOS ja Android, arendajaplatvormi rakendamiseks. Lisaks React Native-le on ViroCore'i poolt pakutav arendamisvõimalus mõlemale kohalikule platvormile.

ViroReact API-l on mitu kohandatud Reaxi komponenti, et rentida erinevaid stseene ja objekte kolmemõõtmelises keskkonnas. ViroReacti juures on hea see, et see on avatud lähtekoodiga, nii et te ei pea muretsema litsentsitasude maksmise pärast. Pange siiski tähele, et ARKiti ja ARCore'i toetatud seadmete piiratuse tõttu ei saa te kasutada iOS-i ega Androidi jaoks eriti vana OS-i versiooni.

Viro API ja Testbed App seadistamine

Viro pakub teile testimisrakendust, mille saab installida päris seadmesse ja testida rakendust, mille ehitate. See sisaldab ka mõnda katsealuste rakenduste näidist, mis on loodud kasutades ViroReact südamikku.

Viro Media App iOS-i seadmetele installimiseks minge siin rakenduste poodi ja Androidi jaoks on siin Play poe rakendus. Pange tähele, et edasiseks jätkamiseks on see vajalik samm.

Viro Reacti tuuma juurde pääsemiseks vajate API-võtit. Logige sisse või looge uus konto aadressil viromedia.com ja saate registreeritud e-posti aadressile API-võtme.

Kui see on tehtud, käivitagem vaikimisi proovilahendusrakendus, mis on kaasas iga Viro projektiga, kasutades selle CLI-tööriista. Esiteks peate lisama API-võtme App.js-faili.

Pärast seda avage terminaliaken ja käivitage npm.

Viro projekti käivitades märkate terminali aknas alati, et peale react-native-cliinterface saamise, mis käivitab Metro kimbu ja laadib sõltuvusgraafiku, kasutab react-viro-cli ngroki pakkeri teenust, mis pakub teile lõpp-punkti käivitage Viro Media rakenduses päris seadmes. Näete lõpp-punkti, mis kajastub ülaltoodud ekraanipildil.

Rakenduse avamisel võtab teid järgmine ekraan vastu.

Järgmisena klõpsake menüüribale pääsemiseks vasakus ülanurgas olevat ikooni.

Klõpsake menüüribal nuppu Enter Testbed. Seejärel sisestage npm-i käivitamisel terminalis loodud ngroki lõpp-punkt.

Kui see on tehtud, klõpsake nuppu Mine ja teil palutakse valida selline keskkond nagu allpool. Klõpsake valikul VR.

Näete eelinstalleeritud rakendust, nagu allpool, oma seadmes töötavat.

Rakenduse loomine

Kuna kõik on korras, saate nüüd edasi liikuda ja jätkata tööd oma VR-i rakendusega. Olete juba kogenud rakendust Hello World, mis on ViroReact CLI tööriistaga eelmonteeritud. Selles jaotises hakkame seda soovitud tulemuse saavutamiseks redigeerima ja kohandama.

Esiteks kaotame ekraani, kus see soovitab valida renderduskeskkond kas AR- või VR-testirakenduseks. Kuna töötame ainult VR-i rakendusega, värskendage meil rakenduse render () funktsiooni App.js-failis nagu allpool.

Meetod _getVRNavigator () muudab stseeni navigaatori VR-elamuseks. Stseeni navigaator on mis tahes Viro rakenduse sisenemispunkt. AR jaoks leiate ViroARSceneNavigator ja VR jaoks leiate ViroVRSceneNavigator. Mis tahes stseeni renderdamiseks on sellel komponendil kaks vajalikku rekvisiiti: apiKey ja algstseen. Failis App.js kuvatakse praegu renderdatud stseen nagu allpool. SharedProps osa on apiKey.

InitScene rekvisiitide väärtus on InitialVRScene. See väärtus on tegelikult komponent, mida stseeni navigaator esialgu kuvab. Meie puhul on see praegu komponent HelloWorldScene.

Stseenid ja tekst VR-rakenduses

Rakendused Viro Reaktis koosnevad stseenidest, mida esindab komponent ViroScene. Iga stseen on samaväärne vaadetega. Põhistseeni loomiseks peate vaid muutma komponenti . Avage HelloWorldScene.js. Võite märgata, et ViroScene on juba imporditud.

Järgmisena lubage meil muuta renderdusfunktsiooni. Looge oma tekstipõhine stseen.

ViroText on komponent, mis pakub kahemõõtmelist teksti funktsionaalsust. See kasutab rekvisiite nagu tekst ise, textAlign, fontSize, witdh, position ja nii edasi. Teksti saab kujundada fontFamily abil, kuid pange tähele, et mitte kõik platvormid ei toeta kõiki fondiperekondi. Võite kasutada ka stiiliobjekti, mis on loodud StyleSheet abil React Native tuumast. Atribuudi fontSize abil saab teksti suurust suurendada või vähendada. Vaadake ülaltoodud koodilõigu tulemust allpool.

3D-teksti lubamiseks on olemas 3D-tekst, mis on nimega extrusionDepth, mille väärtus on suurem kui null. Lisage see vara ViroText komponenti.

3D-efekti lisamine teksti

Kui ekstrudeerimise sügavus on suurem kui null, saate tekstile rakendada kolme materjali: frontMaterial, backMaterial ja sideMaterial. Lisage efekti nägemiseks nendele materjalidele erinevad värvid. Jätkamiseks peate importima ViroMaterials react-viro-st.

Materjalid on varjutuse atribuutide kogum, mis määratlevad geomeetria pindade renderdamisel välimuse. Tegevuse nägemiseks vaadake allpool.

360 PhotoSphere lisamine

Võib-olla olete testimisrakenduses märganud, et testisime varem, sellel oli taustpilt, mis käitus nagu 360 sfääri. Neid 360 pilti leiate sageli VR-rakendustest. Selle lisamiseks meie rakenduses kohe laadige sellelt lingilt alla mõni vara ja kleepige fail projekti nime / js / res / kataloogi. Neid varasid saab tasuta kasutada.

Sellise pildi lisamiseks on Viro React API-s komponent, mida nimetatakse Viro360Image. Saate selle importida react-viro-st.

See komponent kasutab 360-kraadise vaate kuvamiseks seadme güroskoopi. Lisage komponent ViroScene sees nagu allpool ja enne ViroText.

Kujutise algne laadimine võib võtta paar sekundit, kuid see ilmub teele õigesti. Vaadake tulemusi allpool.

Järeldus

ViroReact pakub suurt hulka API komponente, mida saate kasutada oma VR-rakenduse laiendamiseks. Kas märkasite, et pärast rakenduse komponendi muudatuste tegemist ei pidanud me kunagi ngroki kimbu uuesti käivitama? Siin peitubki ViroReacti eelis. Loodetavasti teile see õpetus meeldis.

Selle õpetuse täielik kood on saadaval Githubi hoidlas allpool.

Veebi- või mobiilirakenduse loomine?

Crowdbotics on kiireim viis rakenduse loomiseks, käivitamiseks ja mõõtmete muutmiseks.

Arendaja? Proovige rakendust Crowdbotics App Builder, et kiiresti tellida ja juurutada mitmesuguste populaarsete raamistikega rakendusi.

Hõivatud või mittetehniline? Liituge sadade õnnelike meeskondade loomise tarkvaraga Crowdbotics peaministrite ja asjatundlike arendajatega. Ulatuse ajakava ja maksumus koos Crowdboticsi hallatava rakenduste arendamisega tasuta.