Как сделать приложение с дополненной реальностью, используя React Native

Введение

Возможно, вас в последнее время тоже, как и меня, заинтересовала постоянно растущая сфера дополненной реальности. В том или ином виде или форме эта технология встречается практически везде: играете ли вы в мегапопулярную игру Pokemon GO или используете фильтры Snapchat, например.

И вы уже, наверняка, задались вопросом, как же сделать что-то подобное. Тем более что такие лидеры ИТ-индустрии, как Марк Цукербург, утверждают, что за дополненной реальностью будущее.

Поэтому сейчас самое время заняться созданием приложений с дополненной реальностью. Большинство мобильных телефонов теперь уже имеют аппаратные возможности для расширения реальности, а дорогая гарнитура для перенесения технологий с экранов в реальный мир больше не нужна.

В этом руководстве я покажу, как создавать кросс-платформенные приложения с дополненной реальностью, используя React Native и Viro.

Установка Viro

Во многих руководствах написано, что для создания кросс-платформенных приложений с дополненной реальностью следует задействовать Unity или Unreal Engine. Но как веб-программист, занимающийся созданием мобильных приложений, я предпочел бы использовать то, в чем немножко разбираюсь. Лично я считаю, что чем меньше технологий задействуется, тем лучше. Поэтому искал способ использовать вместе дополненную реальность и React Native. Найденная мной платформа Viro именно для этого и предназначена.

Вот ссылка на краткое руководство для установки и быстрого начала работы с Viro.

После установки Viro на компьютер вам также пригодится приложение Viro Media для тестирования будущих приложений. Установите его на свое мобильное устройство.

Использование Viro

А дальше  —  самое время сделать примерный проект. Сначала запустите в терминале react-viro init ViroSample — verbose. Примерный проект будет создан в любом каталоге, который выберете. Откройте этот проект и наберите в терминале классические npm start. Появится ссылка и что-то вроде этого:

Теперь найдите приложение Viro в телефоне, нажмите на меню-гамбургер и перейдите в раздел enter testbed. Введите здесь ссылку NGrok, которую получили в терминале.

А теперь присмотритесь: вот уже и появился «Hello World!».

Заключение

Поздравляю! Вы только что создали свое первое мобильное приложение с дополненной реальностью. И теперь надо будет пробежаться по документации Viro, продолжая изучать дополненную реальность и узнавая о том, что бы еще такого сумасшедшего сделать с ее помощью. Удачи!

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Ryan Flynn: How to Make an AR App Using React Native

Предыдущая статьяСоздаем 3D-модель из акварельной картины
Следующая статья4 секрета читаемого и производительного кода JavaScript