Обновление от 19 марта 2017 г. Я все еще наблюдаю большой поток посетителей по этой статье, поэтому обновил пример кода на Github, добавив в него новейшие версии всех зависимостей.
Установив, почему WebVR имеет значение, пора запачкать руки и построить простой пример WebVR с использованием A-Frame, React и Redux. Одна из вещей, которые мы можем сделать с помощью WebVR, чего не может сделать собственное приложение VR, - это плавное переключение между обычным рендерингом нашего состояния на основе HTML / CSS в браузере и 3D-рендерингом того же состояния. Итак, давайте попробуем это с помощью некоторого работающего кода.
Я создал небольшое демонстрационное приложение на основе шаблонного проекта A-Frame React с добавлением Redux и Immutable для сохранения состояния. Приложение использует Meetup API для привлечения участников декабрьской встречи Copenhagen VR + AR + 360 group и отображает список их профильных фотографий. Когда щелкают по фотографии, она меняет цвет, показывая, что участник был классифицирован как хакер, хипстер или хастлер ».
Нажав кнопку, пользователь может изменить представление на 3D-рендеринг того же списка членов. При просмотре на VR-совместимом устройстве пользователь будет помещен в сферу этих фотографий профиля с возможностью изменять классификацию каждого члена, используя курсор, управляемый взглядом, чтобы нажимать на них. Если посмотреть вниз, можно увидеть красную сферу, по которой можно щелкнуть, чтобы вернуться в «2-й режим».
Демонстрационное приложение можно посмотреть вживую здесь - для переключения из 3D-режима в полноценный стереоскопический VR-режим требуется мобильный телефон или браузер, совместимый с WebVR. Исходный код приложения доступен на Github.
Давайте перейдем к техническим
Приложение полностью построено с использованием React, Redux и Webpack - библиотек, знакомых большинству фронтенд-разработчиков. Библиотека aframe-response действует как мост между A-Frame и React, а библиотека react-redux помогает нам чисто связать наши компоненты с нашим состоянием.
Состояние состоит из двух записей:
- Логическое значение vrMode, которое указывает, должны ли компоненты визуализировать свое 3D / VR-представление с использованием A-Frame или их 2-мерное представление с использованием обычных HTML и CSS.
- Массив членов с их идентификатором, именем, фотографией и типом.
При щелчке по члену в любом режиме отправляется действие NEXT_MEMBER_TYPE Redux, тип элемента изменяется, и React при необходимости выполняет повторный рендеринг. Поскольку A-Frame - это просто разметка, и используются компоненты из aframe-react, этот повторный рендеринг работает без проблем как в 2-м, так и в 3-м режимах.
При нажатии кнопки включения трехмерного режима отправляется действие ENABLE_VR_MODE Redux. Это просто изменяет логическое значение vrMode в состоянии на true, и снова Redux и React обрабатывают применение и рендеринг нового состояния.
В крупномасштабном приложении, возможно, было бы лучше разделить компоненты на «2d» и «3d» компоненты и позволить контейнерам выбирать правильный из них в зависимости от состояния, но в этом примере я решил, что обе визуализации будут в одном компоненте. . Контейнер Wrapper, как показано выше, просто отображает разметку A-Frame, когда vrMode включен, и обычный HTML, когда он не включен.
Контейнер Members должен иметь только одно различие в зависимости от режима рендеринга: React требует, чтобы методы рендеринга всегда возвращали один узел, и хотя этот узел контейнера может быть обычным div в режиме 2d, он должен быть элемент A-Frame Entity в трехмерном режиме. Элемент Entity является основным строительным блоком A-Frame, но он также является эквивалентом A-Frame нейтрального контейнера, такого как элемент div. Если в 3D-режиме в качестве контейнера используется div, на холсте ничего не будет отображаться, поскольку сцена содержит недопустимую разметку.
Компонент Member (не путать с контейнером Members во множественном числе, извините за запутанное именование) также смотрит на vrMode, чтобы определить, как рендерить себя. В 3D-режиме компонент Entity, предоставляемый aframe-react, используется для визуализации блока с фотографией профиля в виде текстуры, окрашенной в цвет, полученный из типа элемента. В режиме 2d рендерится обычный div с изображением внутри, и в зависимости от типа члена добавляется класс изменения состояния.
В обоих случаях можно использовать один и тот же обратный вызов onClick при щелчке по члену, будь то нажатие на элемент div на веб-странице или в поле в виртуальной реальности. Redux обрабатывает действие и обновляет состояние, а React при необходимости выполняет повторный рендеринг. В этой настройке библиотекам не нужно ничего знать о том, как отображается состояние, чтобы выполнять свои функции.
Опять же, чтобы просмотреть исходный код целиком и поиграть с ним локально, перейдите в репозиторий на Github.
В заключение
С помощью A-Frame веб-разработчики могут легко приступить к созданию 3D- и VR-визуализаций, и они могут применять эти визуализации к существующим приложениям на основе React с минимальными изменениями. Это особенно верно, если архитектура использует принципы Flux, поскольку совместно используемое однонаправленное состояние и поток событий хорошо подходят для множества различных представлений одних и тех же данных.
Я призываю всех, кто создает программное обеспечение для бизнеса VR, подумать, может ли комбинация двухмерного изображения и трехмерного изображения / виртуальной реальности быть лучшим подходом, и если такой пользовательский опыт не будет иметь наибольшего смысла в браузере. Вдобавок ко всему, это может быть быстрее реализовать этот способ, в зависимости от набора навыков вашей команды.
Добавление этой «функции виртуальной реальности» к вашему существующему веб-решению SaaS могло бы оказаться бесполезным при таком подходе. Разве ваши пользователи не предпочтут визуализацию виртуальной реальности прямо в браузере, а не загрузку еще одного мобильного приложения или - ах, установку настоящего программного обеспечения для настольных компьютеров? Не так ли?
Каспер Фабрициус является соучредителем компании Cimmerse - Продавайте больше с помощью 3D, VR и AR. Имея 17-летний опыт работы в качестве веб-разработчика fullstack, он стал экспертом в WebVR и стал автором A-Frame. О виртуальной реальности и кодировании он пишет в Твиттере как @fabricius.
Если вам понравилась эта статья, вам также могут понравиться:
