Как да направите приложение ARKit за 5 минути с помощта на React Native

В WWDC 2017 Apple пусна ARKit, следвайки Google и Facebook в Augmented Reality. Това е голям ход, тъй като почти навсякъде iPhone ще се превърне в първото широко разпространено AR устройство. Разработчиците ще имат шанс да тестват своите AR продукти на обществеността. Освен това е невероятно нещо, което всеки личен разработчик може да използва ARKit, за да напише собствено AR приложение.

Apple направи ARKit много лесен за използване, но все още изисква доста усилия, за да го настрои правилно и да стартира първата демонстрация, особено за тези, които не са много запознати с 3D програмирането. Това, което ще ви покажем в тази статия е, че с помощта на React Native и react-native-arkit можете да пропуснете нетривиалните настройки и ще можете да напишете приложението си за AR само за 5 минути.

Няма да навлизам в подробности как ARKit работи, защото те не са необходими. Вероятно най-добрият начин да го разберете е да го пуснете на вашия iPhone и да видите резултатите с очите си. След това, ако се интересувате от механизма му, можете да се обърнете към официалната документация на ARKit за техническите подробности.

Предварителни

1. iOS 11 beta, Xcode 9 beta и устройства с A9 + процесори

ARKit все още е в бета етап, така че трябва да имате акаунт за разработчици на Apple и да надстроите вашия iPhone / iPad до iOS 11 бета. Ако все още не сте го направили, моля, регистрирайте се в Apple Beta Software Program и следвайте тази инструкция, за да надстроите устройството си.

Забележка: ARKit изисква процесори A9 или по-нови версии, което означава, че трябва да имате iPhone 6s / 7 / SE или iPad 2017 / Pro.

Също така трябва да инсталирате Xcode 9 beta, за да изградите приложението ARKit. Моля, изтеглете го от тук.

2. Реагирайте местни

Facebook представи React Native като библиотека за много платформи за разработване на приложение за iOS / Android с помощта на JavaScript. Ако за първи път го използвате, моля, отидете на „Първи стъпки“ и следвайте частта „Проекти за изграждане с частен код“, за да инсталирате React Native и да стартирате първата демонстрация. Освен това искате да знаете как да стартирате React Native Apps на устройства, тъй като не можете да стартирате ARKit на симулатори. Следвайки тези уроци трябва да ви отнеме не повече от половин час.

Стартирайте първото приложение на ARKit

Сега е време да напишем първото си приложение за ARKit! Преминете инструкциите по-долу и повечето от тях трябва да са ясни.

  • Създайте нов проект React Native и инсталирайте react-native-arkit
реагира-роден init MyFirstARKitApp
cd MyFirstARKitApp
npm install - запазване на реакция-native-arkit
  • Свържете react-native-arkit, за да можем да извикваме нативни кодове с помощта на JavaScript
react-native link react-native-arkit
  • Отворете index.ios.js и заменете всичко със следното
// index.ios.js
import React, {Component} от 'react';
import {AppRegistry, View} от 'react-native';
import {ARKit} от 'react-native-arkit';
експортиране по подразбиране клас Приложението разширява Компонент {
  render () {
    връщане (
      <Вижте стил = {{flex: 1}}>
        
          
        
      
    );
  }
}
AppRegistry.registerComponent ('MyFirstARKitApp', () => Приложение);
  • Отидете в папката ios и се уверете, че използвате бета Xcode 9, за да отворите MyFirstARKitApp.xcodeproj. ARKit ще използва камерата за запис, анализ и показване на реалността, така че трябва да добавим настройка за поверителност, за да му дадем достъп. Отворете Info.plist и добавете бутона за поверителност - Описание на използването на камерата с напомняне за потребителите, като например „ARKit изисква достъп до камера“.
  • В Xcode натиснете + + ,, изберете Конфигурацията на сградата, за да бъде Release, и затворете изскачащия диалогов прозорец. Свържете вашия iPhone с компютъра и щракнете върху бутона Изпълни. Voila! Току-що направихме първото си приложение за ARKit!

Отворете приложението и изчакайте няколко секунди, за да позволите на ARKit да се инициализира. Тогава трябва да можете да видите куб, прикрепен към 3D ос, плаващ пред вас. Можете да преместите вашия iPhone малко и да видите куба да стои фиксиран в пространството, тъй като той съществува в реалността. Това е основната характеристика на ARKit. Той постига това основно, тъй като има алгоритъм за проследяване на движението на вашия iPhone и изчисляване на обратно къде да се покаже обектът на екрана, така че да се чувства така, че обектът остава във фиксирана позиция в реалността.

Нещо повече

Сега можем да добавим още обекти на сцената. ARKit поддържа 9 основни геометрии. Отворете index.ios.js и модифицирайте компонента ARKit


  
  
  
  
  
  
  
  
  

Възстановете приложението и ще можете да видите 9-те геометрии пред себе си. Смятам, че тези параметри са съвсем обясняващи и можете да играете с тях, за да конструирате по-елегантен композитен обект.

Другите две големи функции, които ARKit има, са разпознаване на равнини и оценка на светлината. Те се поддържат и от реакция-native-arkit. Първото ни приложение всъщност прави тези на заден план. Опитайте да превключвате между светли и тъмни среди и ще видите, че осветлението на обектите се адаптира към фона. За откриване на самолет обаче ни трябва допълнителна работа, за да я настроим и ще обясня как да го направя в следващата статия.

Надявам се, че досега сте доволни да играете с ARKit. Наистина е просто нали? Все още работя върху пренасяне на повече функции на ARKit в реакция-native-arkit, а някои по-ефекти като Gate за предаване и физически базирано предаване ще бъдат възможни в React Native съвсем скоро. Ще публикувам допълнителни учебни статии, за да покажа как да ги прилагам. Също така сте добре дошли да проверите моето репо за GitHub за най-новите актуализации.