Первое погружение в разработку 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 .