Первое погружение в разработку VR с использованием знакомых инструментов и синтаксиса.

Мотивация

Я недавно купил Occulus Go, довольно приличную автономную гарнитуру VR за 200 долларов, чтобы изучить разработку VR; не столько для игр, сколько для приложений повышения производительности (на ум приходит обучение).

Когда я готовился к разработке Occulus Go с использованием Unity, мой коллега упомянул WebVR и, в частности, React 360 . Имея опыт работы в JavaScript и React, это казалось мне естественным направлением исследования; думал поделиться своим опытом.

Предварительные требования

Базовое знакомство с React, базовое знакомство с Git, Node.js установлен , установлен Git, и учетную запись GitHub.

Привет, мир

примечание: окончательный результат этой статьи доступен в ветке hello репозитория larkintuckerllc / hello-react-360.

Сначала мы создаем новую папку проекта, например, hello-react-360, с помощью:

npx react-360-cli init hello-react-360

Мы можем развиваться локально с помощью:

npm run start

Мы можем создать производственную сборку с помощью:

npm run bundle

Наблюдения:

  • Производственная сборка - это папка build
  • Папка статических ресурсов static_assets не копируется автоматически в папку build.

Чтобы избежать необходимости многократно вручную копировать папку static_assets, мы создаем сценарий; scripts / copy-assets.sh:

и обновляем скрипт bundle в package.json:

...
"bundle": "node node_modules/react-360/scripts/bundle.js && sh scripts/copy-assets.sh",
...

Развертывание

Для просмотра этого приложения с помощью устройства с поддержкой виртуальной реальности, например, Occulus Go, нам необходимо опубликовать папку build, например, в GitHub Pages .

Мы создаем репозиторий GitHub для этого проекта; предположим, что у вас есть способ выполнить:

  • Инициализировать его как репозиторий Git
  • Добавьте все файлы
  • Создать коммит
  • Создайте репозиторий GitHub
  • Добавьте репозиторий GitHub в качестве удаленного
  • Отправьте главную ветку в GitHub

Устанавливаем библиотеку gh-pages:

npm install -D gh-pages

создать сценарий scripts / deploy.js:

и создайте сценарий deploy в package.json:

...
"deploy": "node scripts/deploy.js"
...

Развертываем приложение:

npm run deploy

Эта команда автоматически создает ветку GitHub gh-pages, состоящую из папки build, и, таким образом, публикует ее на GitHub Pages .

В моем конкретном случае приложение доступно по адресу:

Https://larkintuckerllc.github.io/hello-react-360/

Дальнейшие действия

Теперь, когда у нас есть способ как разрабатывать локально, так и публиковать в производственной среде, мы начинаем углубляться в детали React 360 в следующей статье React 360 на примере: Часть 2 .