Первоначально опубликовано на surajondev.com

Введение

Веб-разработка — один из самых процветающих и потенциальных рынков для людей, которые все еще привыкают к этому прекрасному миру Интернета. Поскольку разработчики больше внимания уделяют искусственному интеллекту, машинному обучению и виртуальной реальности. Эта технология обязательно окупится в будущем. Итак, сегодня мы собираемся изучить вещи, основанные на одной из этих технологий, которая называется виртуальной реальностью, сокращенно VR. Мы собираемся использовать структуру A-frame для создания опыта виртуальной реальности.

Каркас А-каркас

A-Frame — это веб-фреймворк для создания приложений виртуальной реальности (VR). A-Frame основан на HTML, что упрощает начало работы. Но A-Frame — это не просто граф 3D-сцены или язык разметки; ядро — это мощная структура компонентов объектов, которая обеспечивает декларативную, расширяемую и компонуемую структуру для three.js.

Первоначально задуманный в Mozilla и теперь поддерживаемый соавторами A-Frame в Supermedium, A-Frame был разработан как простой, но мощный способ разработки VR-контента. Как независимый проект с открытым исходным кодом, A-Frame превратился в одно из крупнейших сообществ виртуальной реальности. ИСТОЧНИК — А-КАДР

Требование

  • "Кронштейны"
  • Это простой и понятный текстовый редактор, который предоставляет функции, которые мы собираемся использовать в этом.
  • У этого есть функция предварительного просмотра веб-сайта в реальном времени, которая будет очень полезна при настройке среды.
  • Он имеет встроенный сервер, поэтому нет необходимости во внешней программе базы данных.
  • Веб-браузер
  • Веб-браузер, поддерживающий HTML 5, будет отличным решением.

Начиная

Это будет очень просто, так как это для новичка, который хочет начать использовать A-frame. Поэтому для этого мы напишем код, и я объясню каждый шаг.

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Выше, в основном, у нас есть базовый план HTML-файла с некоторыми другими тегами. Не волнуйтесь, я объясню каждый шаг.

<script></script>
  • Мы импортировали скрипт для A-frame, который доступен на их сайте. Убедитесь, что вы используете последнюю версию A-frame.
<a-scene></a-scene>
  • Этот тег содержит все элементы, которые будут отображаться на сайте.
  • Вы можете видеть этот тег как тег body HTML-файла.
<a-box></a-box> and its attributes
  • Это HTML-тег структуры A-frame, который предоставит вам блок, точнее трехмерный блок.
  • Положение, вращение и цвет являются атрибутами
  • Position- Position представляет собой координату коробки или любого объекта. Он принимает 3 значения для осей x, y и z соответственно.
  • Вращение — то же, что и положение, принимает 3 значения для осей x, y и z.
  • Цвет. Этот атрибут, как следует из названия, будет окрашивать поле.
<a-sky></a-sky>
  • Это используется для создания среды. Среду можно создать с помощью цвета и изображений, и большинство разработчиков используют изображения в формате 360°.

Исполнение

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

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

Выход

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

Если он не показывает, обновите его, и он обязательно появится, если ваш код правильный.

Последнее примечание

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

Если вы хотите проверить мой проект на эту тему, посетите мой репозиторий на GitHub.