Я знаю, о чем вы думаете: для создания VR-приложений требуется докторская степень по математике и компьютерной графике, и вам потребуются месяцы только на то, чтобы запустить приложение.
Что ж, я рад сообщить, что вы не могли ошибаться больше. В этом уроке мы собираемся создать веб-сайт виртуальной реальности за считанные минуты (вам даже не нужно устройство виртуальной реальности, чтобы протестировать его)!
Это означает, что вы, да ВЫ, можете создавать VR-опыт и вносить свой вклад в метавселенную. Давайте начнем!
Почему Интернет?
Интернет может быть не первым, о чем вы думаете, когда думаете о виртуальной реальности. Однако на самом деле Интернет — одна из немногих существующих действительно кросс-платформенных технологий.
Один раз создав VR-приложение с помощью Javascript, вы сможете запускать его практически на любой VR-системе.
Каковы соответствующие технологии?
Итак, какую технологию мы собираемся использовать?
Во-первых, мы воспользуемся Aframe.io, библиотекой для создания и рендеринга сцен виртуальной реальности с помощью простого HTML и Javascript. Кроме того, вы можете решить использовать Three.js для более сложной графики. Aframe.io включает поддержку Three.js API.
Далее мы воспользуемся преимуществами WebXR, библиотеки, первоначально разработанной Mozilla, которая позволяет вам взаимодействовать с устройствами виртуальной реальности прямо из Интернета. Кроме того, я собираюсь показать вам, как вы можете тестировать свои приложения без устройства виртуальной реальности с помощью расширения WebXR API.
Начало работы с AFrame.io
Чтобы получить доступ к Aframe.io, просто добавьте следующий скрипт через CDN:
‹script src="https://aframe.io/releases/1.2.0/aframe.min.js'›‹/script›
Затем мы можем создать простую сцену со следующим html:
Теперь ключевой момент, на который следует обратить внимание, это то, что мы окружаем нашу виртуальную сцену тегом ‹a-scene›. Затем мы можем вставлять различные фигуры в нашу сцену, включая соответствующий тег.
Вы можете найти полный список тегов a-frame, а также полную документацию по A-Frame здесь:
https://aframe.io/docs/1.2.0/introduction/
Вы заметите, что, хотя вы можете перетаскивать экран для перемещения камеры, вы еще не можете использовать VR-устройство. Это связано с тем, что html-файл должен обслуживаться, его нельзя запустить из статического файла.
Это можно сделать довольно легко с помощью nodeJS. Просто настройте проект npm со следующим файлом javascript:
Наконец, мы можем немного пофантазировать и манипулировать нашей сценой с помощью Javascript следующим образом:
И вот оно! Мы успешно создали анимированную VR-сцену, написав менее 100 строк кода!
Тестирование с помощью WebXR API
Теперь, если вы чем-то похожи на меня и еще не раскошелились на гарнитуру VR, не волнуйтесь! Вы можете протестировать свой VR-сайт в Chrome или Firefox с помощью WebXR API. Просто установите следующее расширение:
Для Firefox: https://addons.mozilla.org/en-US/firefox/addon/webxr-api-emulator/
Для Хрома:
https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje?hl=en
После установки вы можете перейти на вкладку WebXR при проверке страницы и поиграть с эмулированной гарнитурой!
И так, чего же ты ждешь! Начать!
Когда вы будете готовы развернуть свое приложение, попробуйте Codesphere! Мы являемся первой облачной платформой, которая действительно позволяет вам полностью погрузиться в облачную среду.
Удачного кодирования!
