Мое личное путешествие по Экспо и Виро

Я был очень рад попробовать React Native, многие функции мне понравились. Возможность кодировать javascript на iOS, предварительные просмотры в реальном времени на вашем устройстве и в симуляторе iOS. Кросс-платформенное кодирование на языке, который мы изучали в школе, казалось несложным, поэтому мне пришлось попробовать. Ооо, если я делаю мобильное приложение, я мог бы сделать это и в дополненной реальности. Принимая желаемое за действительное, я еще не осознавал.

Все началось хорошо, я начал гуглить

и нашел многообещающие результаты.

Очень здорово, это видео показало мне, как создать приложение дополненной реальности, подключенное к Google Poly Api, которое позволяет пользователям искать любой объект дополненной реальности на платформе и видеть его расширенным в своей среде.

20:00, ночь перед тем, как я выступлю: Это будет легко ... класс получит удовольствие от просмотра этой демонстрации.

Итак, я начинаю следовать и загружаю Expo (что, кстати, больно, если вы ничего не пытаетесь сделать в AR)

Expo - действительно отличное программное обеспечение, которое предлагает как среду командной строки, так и онлайн-интерфейс для работы с React Native. Подобно другим React Native API. Они предоставляют множество встроенных компонентов, которые вы можете подключить прямо к вашему JSX-файлу, чтобы сделать процесс кодирования более эффективным. Например, чтобы использовать AR, вы можете легко добавить компонент THREE-EXPO, который позволяет вам получить доступ к three.js из expo, не растягиваясь слишком далеко.

Я кодирую вместе

и продолжаем смотреть видео. Дела шли хорошо, хотя платформа выставки обновлялась так часто, что потребовалась небольшая реорганизация, чтобы следить за потоком видео. А затем мы переходим к самому интересному - доступу к камере. Мне не терпелось увидеть, как это работает в действии. Итак, я все это настроил.

Получите эту ошибку - expo больше не поддерживает дополненную реальность. Проверьте www. для получения дополнительной информации

Бум!

Поэтому я проверял их документацию по API и указывал, что первый вариант - это «AR», так как это первый вариант, который мне очень нравится.

21:00: Я понял, что AR была удалена из библиотеки expo, поэтому я больше не мог ее использовать. Закройте видео. И начал очень расстраиваться

Требуется найти другое решение ... вот это сообщение от Эндрю Сантоса

Мастер Эндрю Сантос упомянул, что я предыдущий ученик работал на платформе под названием Viro React. Это выглядело довольно простым в использовании, поэтому я проверил их документацию.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

команда установки homebrew

brew install node

команда установки узла

yum install watchman

установить сторож

npm install -g react-native-cli

установить интерфейс командной строки React

npm install -g react-viro-cli

установить интерфейс командной строки Viro

npm install -g react-viro-cli

И приступил к отработке документации

react-viro init ViroSample

Скачал приложение Viro



Viro Media
Загрузите бесплатное приложение Viro Media и оцените захватывающие возможности AR / VR, созданные на платформе Viro. Также… itunes.apple.com



Вот ссылка для загрузки приложения, она позволяет вам тестировать свой мобильный опыт в процессе разработки. Как и в обычных приложениях для iPhone, AR требует использования камеры телефона, поэтому вы не можете использовать симулятор xCode. Так что загрузка приложения здесь - важный шаг. Все было хорошо

22:00: плавное плавание под парусом

С самого начала все работало хорошо, образец проекта Viro работал, как и было обещано, и следующим шагом в документации было добавление компонентов. Это выглядело довольно просто, поскольку все реагировало на это, импортируя разные материалы.

./HelloWorldSceneAR.js
import {
  ...
    ViroBox,
  ViroMaterials,
} from 'react-viro';

а затем я создал поле под компонентом ViroText

<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} />
ViroMaterials.createMaterials({   grid: {     diffuseTexture: require('./res/grid_bg.jpg'),
 }, 
});

и добавил к нему материалы.

Добавление 3D-объектов в сцену

Продолжая в документации, я начал добавлять 3D-объекты, необходимые для импорта компонентов Viro3DObject, ViroAmbientLight и ViroSpotLight.

Добавьте следующее в свой оператор импорта

import {
    ...
  Viro3DObject,
  ViroAmbientLight,
  ViroSpotLight,
} from 'react-viro';

После того, как вы закончите импорт, создайте новый Viro3DObject и импортируйте предоставленные файлы с помощью viro в свой проект в качестве источника. Укажите положение, масштаб и тип - vrx - это преобразованный тип файла 3D-объекта

<Viro3DObject source={require('./res/emoji_smile/emoji_smile.vrx')}            position={[-.5, .5, -1]} scale={[.2, .2, .2]} type="VRX" />

Расположите объект в пространстве, задайте масштаб и укажите тип - обратите внимание, что существует много разных типов объектов, и все они по-разному обрабатываются в viro. Для получения дополнительной информации о 3D-объектах, просмотрите этот документ

Создайте плоскость AR

Чтобы это была дополненная реальность, она должна быть хорошо расположена в космосе, и Viro предлагает отличное решение. Для этого импортируйте ViroARPlaneSelector в оператор импорта вашего приложения реакции. А затем добавьте следующий код в свой ViroARPlaneSelector

<ViroARPlaneSelector />

Чтобы вложить объекты в пространстве в ViroPlane, вы просто оборачиваете объект в ViroARPlane Selector. И теперь у вас все готово к «рабочему» проекту дополненной реальности с помощью react. Теперь, когда у нас есть несколько объектов в сцене, мы можем оживить ее.

Распознавание изображений

Доделал документацию и начал работать над распознаванием изображений и привязкой

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

Я понял, что вознаграждение того не стоит, и сильно переживал из-за этого сообщения в блоге и из-за этого фреймворка.

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

Так как сейчас состояние дополненной реальности и реагировать - не здорово.

Спасибо