Это первая часть серии «Разработка виртуальной реальности A-Frame», в этой части я объясню основные компоненты и синтаксис фреймворка A-Frame и создам простой проект виртуальной реальности Hello World с использованием A-Frame.

Прежде чем начать, если вы не знаете основных технологий веб-разработки и никогда не работали в Интернете, сначала изучите базовые навыки HTML, CSS и Javascript, а затем следуйте этому руководству.

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

Создайте файл index.html и напишите в нем базовый синтаксис HTML DOCTYPE.

Вставьте скрипт фреймворка A-Frame внутрь контейнера `‹head›‹/head›`

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

Note : You can also install A-Frame using NPM. Use `$ npm install aframe` command.

Теперь давайте изучим синтаксис A-Frame. A-Frame основан на специально созданных HTML-элементах. Как вы можете видеть на картинке ниже, каждый объект представлен пользовательским элементом HTML.

Создание сцены

Во-первых, нам нужно создать сцену, которая настроит для нас основные компоненты, такие как холст, рендеринг, камера, свет и т. д. Это контейнер, внутри которого будут находиться все элементы VR-окружения.

Добавьте тег `‹a-scene›‹/a-scene›` внутри тела, чтобы инициализировать сцену.

Если вы откроете файл index.html в своем браузере, вы заметите, что после инициализации сцены на странице можно увидеть небольшой значок виртуальной реальности.

Добавление куба/коробки

Давайте вставим в него 3D-коробку.

Добавьте `‹a-box color="red"›‹/a-box›` ` внутри тега `‹a-scene›`.

Теперь, если вы обновите index.html, вы ничего не увидите. Но если вы нажмете клавишу S на клавиатуре, камера начнет двигаться назад, и вы увидите красную рамку. Причина, по которой вы не видите коробку, заключается в том, что положение камеры и коробки одинаковое, они оба расположены в одной и той же точке (начало [0,0,0]) на экране.

Теперь, прежде чем добавлять дополнительные элементы, позвольте мне рассказать вам, что такое примитивы и сущности в A-Frame.

`‹a-scene›`,` ‹a-box›`,` ‹a-sphere›` и т. д. пользовательские теги HTML от A-Frame, которые просты в использовании и называются примитивами.

На руке `‹a-entity`` может быть любой элемент. Это может быть коробка, сцена, сфера, свет или камера. Все `‹a-scene›`,` ‹a-box›`, `‹a-cube›` и т. д. -определенные объекты для простоты использования. Однако, если вам нужны настраиваемые формы и расширенные функции, такие как звук в вашей виртуальной среде, «a-entity» поможет вам в этом.

Например, под тегом `‹a-box›` находится тег `‹a-entity›` с предопределенной позицией и геометрией:

‹a-entity id=”box” геометрия=”primitive: box” material=”color: red”›‹/a-entity›

Надеюсь, вы поняли разницу между примитивами и сущностями. Не волнуйтесь, если вы все еще запутались, вы поймете это намного лучше, когда мы будем использовать теги ‹a-entity›.

Изменение свойств

Изменить свойства примитивов также очень просто. Давайте поставим нашу коробку перед камерой.

Добавьте атрибут позиции в тег `a-box`. Атрибут Position определяет положение элемента по осям X, Y и Z.

‹a-box position="0 2 -5" color="red"›‹/a-box›

Добавьте атрибут вращения в тег `a-box`. Атрибут Rotation задает вращение по осям X, Y и Z элемента.

‹a-box position=”0 2 -5″ rotate=”0 45 45″ color="red"›‹/a-box›

И добавьте атрибут масштаба, чтобы масштабировать элемент по осям X, Y и Z.

‹a-box position=”0 2 -5″ rotate=”0 45 45″ scale=”2 2 2″ color="red"›‹/a-box›

Теперь ваша коробка будет выглядеть так.

Поэкспериментируйте со свойствами коробки, все они перечислены здесь: https://aframe.io/docs/0.8.0/primitives/a-box.html#attributes.

Добавление фона/скайбокса

Скайбокс — это фон трехмерного мира. `‹a-sky›‹/a-sky›` используется для добавления фона в сцену.

‹a-sky color="#94c5d6″›‹/a-sky›

Добавьте тег `‹a-sky›` внутрь контейнера `‹a-scene›`. Я использовал простой шестнадцатеричный код для цвета неба, но вы также можете использовать изображение для фона неба. После добавления неба ваша сцена будет выглядеть так

В этой части мы рассмотрели базовый синтаксис фреймворка A-Frame, создали простую сцену с блоком и добавили к нему свойства. В следующем уроке мы рассмотрим камеру, свет и анимацию с их соответствующими свойствами.

Полный код доступен на Github: https://github.com/hasanaliqureshi/A-Frame-VR-Development/blob/master/A-Frame-VR-Development-Part-1.html

Публикация Virtual Reality Pakistan Medium: https://medium.com/vr-pakistan

Группа Virtual Realiy Pakistan в Facebook: https://www.facebook.com/groups/VirtualRealityPK/

Первоначально опубликовано на hasanali.me 10 октября 2018 г.