ViroReact, React Native və Crowdbotics ilə ilk VR tətbiqinizi necə yaratmaq olar

Səhnələr, 3D mətn və PhotoSphere ilə sadə bir VR tətbiqi yaradın.

Virtual Reality (VR), fərdin gerçək hiss etdiyi üç ölçülü bir real mühit təmin edərək təcrübəni artırmağı hədəfləyən bir immersive texnologiyadır. Bu texnologiyanın tətbiqi sonsuzdur. Burada hərtərəfli və əyləncəli oyun tətbiqetmələri ilə yanaşı həyatını xilas edə biləcək sağlamlıq simulyasiyaları nümunələri tapa bilərsiniz.

React Native inkişaf etdiriciləri üçün bu texnologiya ViroReact adlı üçüncü tərəf platforması tərəfindən təmin edilir. Bu platforma ilə React Native inkişaf etdiriciləri sürətli bir şəkildə cross-platform AR / VR tətbiqetmələri yarada bilərlər. ViroReact hazırda ARKit, ARCore, VR Cardboard, Gear VR və Daydream dəstəkləyir. Viro Media

Bu təlimatda sizə quraşdırma və quraşdırma prosesi keçməyinizə, kiçik bir VR tətbiqi yaratmağınızın və bunun arxasındakı əsasları anlamağınıza kömək edəcəyik.

ümumi baxış

  • İlk addımlar: quraşdırma və quraşdırma
  • ViroReact nədir?
  • Tətbiq yaradın
  • VR tətbiqindəki səhnələr və mətn
  • Mətnə 3D effekti əlavə edin
  • 360 PhotoSphere əlavə edin
  • Nəticə

İlk addımlar: quraşdırma və quraşdırma

Əvvəlcə Crowdbotics App Builder tərəfindən yaradılan React Native layihəsindən istifadə edəcəyik. Crowdbotics ilə bir layihə yaratmaq üçün yalnız şəxsi e-poçt adresinizdən və ya Github profilinizdən (tövsiyə olunur) daxil olmaqdır.

Daxil olduqdan sonra Tətbiq Yarat səhifəsində, Mobil Tətbiq altında Yerli Şablonlara Cavab ver seçin.

Sonda bu səhifənin altındakı şablonunuzun adını seçin və sonra "Tətbiqimi yaradın!" Düyməsini vurun. Bir neçə dəqiqədən sonra layihəniz yaradılacaq. Github vasitəsilə daxil olmağı seçmisinizsə, Crowdbotics xidməti tərəfindən yaradılan Github deposuna dəvət alacaqsınız. Hələlik cihazınızdakı deposu klonlayın.

Davam etmək üçün inkişaf kompüterinizdə aşağıdakıları quraşdırmış olmalısınız.

  • Node.js
  • Guardian (yalnız OSX / Linux)
  • Python2, JDK (yalnız Windows)
  • ngrok paketi qlobal modul kimi quraşdırılmışdır
  • reaksiya-yerli-cli
  • reaksiya-viro-cli

İki komanda xətti alətini quraşdırmaq üçün bir terminal pəncərəsini açın və aşağıdakı əmri işə salın.

Quraşdırıldıqdan sonra, bu təlim zamanı 2.13.0 olan react-viro-cli-nin ən son versiyasına sahib olduğunuzdan əmin olun. Quraşdırılmış versiyanı yoxlamaq üçün "react-viro-cli --version" çalıştırın.

Klonlaşdırılmış Github deposundan keçin. Aşağıdakı fayllar xaricindəki hər şeyi silin.

  • Git qovluğu
  • .gitattributes
  • .gitignore

Bunun səbəbi mövcud React Native tətbiqetməsini Viro React-a inteqrasiya olunmasının nəzərdə tutulduğu kimi işləməməsidir. Buna görə fərqli bir yanaşma edəcəyik. Faylları sildikdən sonra, standart olaraq inteqrasiya dəstəyi təklif edən yeni bir layihə yaratmaq üçün "react-viro cli" faylını istifadə edin.

Varsayılan olaraq, react-viro-cli iplikdən layihə asılılıqlarını quraşdırmaq üçün istifadə edir. Bu addımdan sonra aşağıdakılara bənzər bir layihə kataloqu quracaqsınız.

ViroReact nədir?

ViroReact, AR (Genişlənmiş Reallıq) və VR (Virtual Reallıq) üçün tətbiqetmə təcrübələri yaratmağa imkan verən bir platformadır. ARKit və ARCore ilə geliştirici platforması iOS və Android kimi müəyyən mobil platformalar üçün tətbiq olunur. React Native-ə əlavə olaraq, ViroCore tərəfindən təqdim olunan hər iki yerli platforma üçün bir inkişaf seçimi var.

ViroReact API, üçölçülü bir mühitdə müxtəlif səhnələr və obyektlər göstərmək üçün istifadə edə biləcəyiniz bir sıra xüsusi React komponentlərini ehtiva edir. ViroReact-in yaxşı tərəfi açıq mənbəyidir, beləliklə qonorar ödəməkdən narahat olmayın. Bununla birlikdə ARKit və ARCore tərəfindən dəstəklənən cihazların məhdudlaşdırılması səbəbindən iOS və ya Android üçün əməliyyat sisteminin son dərəcə köhnə bir versiyasını istifadə edə bilməyəcəyinizə diqqət yetirin.

Viro API və Testbed Tətbiqinin qurulması

Viro sizə həqiqi bir cihazda quraşdırıla bilən bir sınaq yatağı tətbiqetməsi verir və yaratdığınız tətbiqi sınayır. ViroReact Core ilə hazırlanmış sınaq tətbiqetmələrinin bəzi nümunələrini də əhatə edir.

İOS cihazlarını Viro Media Tətbiqinə yükləmək üçün buradakı Tətbiq Mağazasına gedin. Android üçün Play Store-da bir tətbiq var. Bunun davam etdirilməsi üçün lazımlı bir addım olduğunu unutmayın.

Viro React Core-a daxil olmaq üçün API düyməsinə ehtiyacınız var. Viromedia.com saytına daxil olun və ya yeni bir hesab yaradın. Qeydə alınan e-poçtunuzda bir API açarı alacaqsınız.

Bundan sonra, CLI aləti ilə hər Viro layihəsi ilə birlikdə gələn standart nümunə test tətbiqini işə salaq. Əvvəlcə API. açarını App.js sənədinə əlavə etməlisiniz.

Sonra bir terminal pəncərəsini açın və npm başlayın.

Bir Viro layihəsi çalıştırdığınız zaman, Terminal pəncərəsində həmişə Metro bundler-in işlədilməsi və asılılıq qrafikinin yüklənməsi üçün cavabdeh bir istifadəçi interfeysi olmadığını, həm də işləməyiniz üçün son nöqtə təmin edən ngrok paketləyici xidmətini daima görərsiniz. Gerçək bir cihazdakı Viro Media tətbiqi. Yuxarıdakı ekran görüntüsündə son nöqtəni görə bilərsiniz.

Tətbiqi açdığınız zaman aşağıdakı ekran sizi qarşılayacaq.

Sonra menyu çubuğuna daxil olmaq üçün sol üstdəki işarəni vurun.

Menyu çubuğunda Testbed daxil edin. Sonra terminalda npm start işlədərkən yaranan ngrok son nöqtəsini daxil edin.

Sonra Git düyməsini vurun. Aşağıdakı kimi bir mühit seçməyiniz istənəcəkdir. VR düyməsini vurun.

Cihazınızda əvvəlcədən quraşdırılmış tətbiqetməni aşağıda göstərildiyi kimi görürsünüz.

Tətbiq yaradın

Artıq hər şey qaydasındadır, davam edə və VR tətbiqinizdə işləməyə davam edə bilərsiniz. Artıq ViroReact CLI alətindən istifadə edərək yaradılmış bir Hello World tətbiqetməsini görmüsünüz. Bu hissədə onu düzəldəcəyik və istədiyiniz nəticəni əldə etmək üçün tənzimləyəcəyik.

Əvvəlcə bir AR və ya VR test tətbiqi üçün göstərmə mühiti seçməyinizi istəyən ekranı silir. Yalnız bir VR tətbiqi üzərində çalışdığımız üçün App.js faylındakı göstərmə () funksiyasını aşağıdakı kimi yeniləyəcəyik.

_GetVRNavigator () metodu səhnə naviqatorunu VR təcrübəsi üçün təqdim edir. Səhnə naviqatoru hər Viro tətbiqi üçün giriş nöqtəsidir. AR üçün ViroARSceneNavigator və VR ViroVRSceneNavigator tapa bilərsiniz. Hər bir səhnənin göstərilməsi üçün iki rekvizit tələb olunur: apiKey və initialScene. App.js faylında hal-hazırda göstərilən səhnəni aşağıdakı kimi görəcəksiniz. SharedProps hissəsi apiKey-dir.

İnitialScene rekvizitləri InitialVRScene dəyərinə malikdir. Bu dəyər əslində səhnə naviqatoru tərəfindən əvvəlcə göstərilən bir komponentdir. Bizim vəziyyətimizdə əvvəlcə HelloWorldScene komponentidir.

VR tətbiqindəki səhnələr və mətn

Viro React-dəki tətbiqlər ViroScene komponenti ilə təmsil olunan səhnələrdən ibarətdir. Hər səhnə baxışlara uyğundur. Sadə bir səhnə yaratmaq üçün sizə lazım olan yalnız komponentdir dəyişmək. HelloWorldScene.js açın. ViroScene'nin artıq idxal edildiyini görəcəksiniz.

Bundan sonra göstərmə funksiyasını dəyişdiririk. Öz mətn əsaslı səhnənizi yaradın.

ViroText iki ölçülü mətn funksiyaları təklif edən bir komponentdir. Mətnin özü, textAlign, fontSize, witdh, position və s. Kimi rekvizitlərdən istifadə olunur. Mətn fontFamily ilə tərtib edilə bilər. Bununla birlikdə, bütün platformaların bütün yazı tipləri ailələrini dəstəkləmədiyini unutmayın. React Native Core-dan StyleSheet ilə yaradılan üslub obyektlərindən də istifadə edə bilərsiniz. Mətnin ölçüsü fontSize xassəsindən istifadə edərək artırıla və ya azaldıla bilər. Yuxarıdakı kod parçasının nəticəsinə aşağıdakı kimi baxın.

3D mətni aktivləşdirmək üçün dəyəri sıfırdan böyük olan extrusionDepth adlı bir dayaq var. Bu 3D mətni aktivləşdirir. Bu xassəni ViroText komponentinə əlavə edək.

Mətnə 3D effekti əlavə edin

EkstruziyaDərinliyin dəyəri sıfırdan böyükdürsə, mətnə ​​üç material tətbiq edə bilərsiniz: frontMaterial, backMaterial və sideMaterial. Təsiri görmək üçün bu materiallara fərqli rənglər əlavə edək. Davam etmək üçün ViroMaterialları react-virodan idxal etməlisiniz.

Materiallar göstərildiyi zaman bir həndəsənin səthlərinin görünüşünü təyin edən kölgə atributlarıdır. Bunu hərəkətdə görmək üçün aşağıya nəzər yetirin.

360 PhotoSphere əlavə edin

Əvvəllər sınaqdan keçirdiyimiz Testbed tətbiqində 360 dərəcə kürə kimi davranan bir divar kağızı olduğunu görmüş ola bilərsiniz. Bu 360 şəkilləri tez-tez VR tətbiqetmələrində tapa bilərsiniz. Bu linkdən hər hansı bir varlığı yükləyin və dərhal tətbiqetməmizə əlavə etmək üçün faylı projectname / js / res / qovluğuna yapışdırın. Bu aktivlərin istifadəsi pulsuzdur.

Belə bir görüntü əlavə etmək üçün Viro React API-də Viro360Image adlı bir komponent var. Onu react-virodan idxal edə bilərsiniz.

Bu komponent 360 dərəcə görünüşü göstərmək üçün bir cihazın gyroskopundan istifadə edir. Komponenti aşağıdakı kimi və ViroText-dən əvvəl ViroScene-də əlavə edin.

Görüntünün ilk dəfə yüklənməsi bir neçə saniyə çəkə bilər, ancaq yolda düzgün şəkildə göstərilir. Aşağıdakı nəticələrə baxın.

Nəticə

ViroReact, VR tətbiqinizi genişləndirmək üçün istifadə edə biləcəyiniz müxtəlif API komponentləri təklif edir. Tətbiq komponentində dəyişiklik etdikdən sonra ngrok paketini heç vaxt yenidən başlatmamalı olduğumuzu fark etdinizmi? ViroReact-in üstünlüyü budur. Ümid edirəm ki, bu təlimat sizə xoş gəldi.

Bu təlimatın tam kodu aşağıdakı Github deposunda mövcuddur.

Veb və ya mobil tətbiq yaradırsınız?

Crowdbotics bir tətbiqetmə qurma, işə salma və miqyaslandırma üçün ən sürətli yoldur.

İnkişaf etdirici? Müxtəlif populyar çərçivələrdən istifadə edərək tətbiqləri sürətlə qurmaq və yerləşdirmək üçün Crowdbotics Tətbiq Oluşturucusunu sınayın.

Məşğul və ya texniki deyil? Crowdbotics PM və təcrübəli inkişaf etdiricilərlə proqram inkişaf etdirən yüzlərlə xoşbəxt komandaya qoşulun. Crowdbotics Managed App Development ilə cədvəl və xərcləri pulsuz olaraq saxlayın.