Создание веб-приложения VR с использованием A-Frame (часть 1): Hello world

Привет, я вернулся. Теперь я принесу тебе кое-что классное. В этом посте я собираюсь показать, как создать приложение WebVr, используя фреймворк под названием A-Frame.

Что такое WebVR?

WebVR - это JavaScript API для создания иммерсивного трехмерного опыта виртуальной реальности в вашем браузере. WebVR изначально был разработан в Mozilla [Владимиром Вукичвичем].

Что такое WebGl?

Webgl - это javascript API для рендеринга 2D и 3D графики в веб-браузере без дополнительных плагинов. Может использоваться внутри элементов HTML, таких как холст.

Что такое А-образная рамка?

Это веб-фреймворк для создания опыта виртуальной реальности. Инструменты поддерживаются Mozilla Teams и работают на Vive, Rift, Daydream, GearVR и на ПК.

Фрейм использует API WebVr для получения доступа к данным, предоставляемым гарнитурой виртуальной реальности об ориентации и положении, трансформации камеры и визуализации контента в гарнитуре.

A-Frame основан на HTML, что упрощает начало работы. Он использует концепцию компонентов, обеспечивающих хорошую структуру. Согласно сайту, A-Frame совместим с большинством библиотек, фреймворков и инструментов, включая React, Preact, Vue.js, d3.js, Ember.js, jQuery. Более подробную информацию о A-Frame вы можете найти здесь.

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

Для начала работы с WebVr с использованием A-frame нам потребуются:

  1. Некоторое базовое понимание HTML

2. Редактор текстового кода, я использую студию визуального кода, но решать вам.

3. Веб-браузер, я использую браузер Mozilla Firefox, он у меня работает хорошо, у меня проблемы с использованием Chrome могут быть из-за того, что его не было в последней версии. Но он поддерживается теми браузерами, которые поддерживают WebGL.

4. Гарнитуры виртуальной реальности, это необязательно, и не беспокойтесь, если у вас их еще нет, они все равно хорошо работают на настольном компьютере и смартфоне.

Первые шаги

мы откроем код нашего редактора и запустим новый HTML-файл, я назову hellovr.html. Затем мы включим скрипт, указывающий на CDN A-кадра.

<head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js">                 
  </script>
</head>

Есть много дополнительных способов, мы сосредоточимся на этом, чтобы не усложнять урок. Смотрите другие варианты здесь.

Наш код A-кадра будет помещен в теги тела. В этом руководстве мы сосредоточимся на базовой концепции и создании простых приложений. После этого вы сможете собрать свой собственный замечательный посох.

Внутри нашего тега body можно разместить тег ‹a-scene›, подобный этому, и открыть наш HTML-код в браузере.

<body>
  <a-scene>
  </a-scene>
</body>

‹a-scene› - это примитивные теги, и все наши компоненты A-frame будут размещены внутри этих тегов. Убедитесь, что вы не забыли закрыть теги. После загрузки в браузере отобразится пустая страница со значком VR в правом нижнем углу страницы, как на изображении ниже.

Если вы получили другой результат, откройте консоль своего веб-браузера, чтобы узнать, нет ли ошибки. Этот значок позволяет полностью погрузиться в виртуальную реальность с помощью гарнитуры.

Теперь давайте добавим что-нибудь в наши приложения VR.

A-frame полностью основан на Three.js. Команда Mozilla хотела создать что-то простое для разработки WebVR, поэтому они использовали синтаксис HTML, упрощая задачу для новичков.

Некоторые из этих синтаксисов называются примитивными. Пример: ‹a-box› и ‹a-sky›.

Чтобы использовать примитив в нашем Webvr, мы помещаем тег ‹a-box› в наш тег ‹a-scene›, как показано в приведенном ниже коде.

<a-box 
        height="1"
        width="2"
        depth="3"
        position="0 0 -4" 
        color="blue"
 </a-box>

Давайте разберемся, что здесь происходит:

‹a-box› нарисует рамку на нашей HTML-странице. Требуется такой параметр, как:

  • высота, какой высоты будет наш ящик (x);
  • ширина (y)
  • глубина, дает трехмерную перспективу (z);
  • position, чтобы указать, где мы хотим разместить наш элемент. Мы передаем в качестве параметра три значения (x, y, z). На изображении ниже показано, как разместить точку в 3D-среде.

  • color, мы можем указать цвет нашего поля в шестнадцатеричном формате (например, #fff).

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

Теперь давайте откроем наш браузер, чтобы увидеть результат.

Поздравляем, мы создали наш первый опыт виртуальной реальности. Вы можете использовать клавиатуру и мышь для взаимодействия с нашей виртуальной средой. А теперь идем дальше.

Теперь мы собираемся добавить больше сотрудников в наш проект.

Мы добавили следующие новые функции:

  • ‹a-sphere› принимает в качестве параметра радиус
  • ‹a-cylinder› принимают за радиус и высоту
  • ‹a-plane› примите ширину и высоту и поверните -90 градусов по x, чтобы сделать его горизонтальной плоскостью.
  • ‹a-sky› принимает в качестве параметров цвет, который будет влиять на всю нашу среду VR.
  • и мы изменили наши атрибуты ‹a-box›, такие как высота, ширина и глубина.

Результат:

Хех !, мы становимся экспертами по виртуальной реальности.

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

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

Мы будем использовать тег ‹a-text›, как показано ниже:

<a-text value=”Hello, World!” color="#AA145D" position="0 2 -3>
</a-text>

В нашем теге ‹a-text› мы передаем значение, которое содержит текст, позицию и цвет. Результат:

Наша первая миссия выполнена. Есть более примитивы, с которыми можно поиграться, см. Документацию (здесь), я только что рассмотрел некоторые из них. Обязательно поделитесь своим опытом.

Клонируйте код на github.

Что дальше…

В моем следующем посте мы узнаем, как загружать изображения в нашу среду Web VR и некоторые 3D-модели.

Прежде чем ты уйдешь…

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