Введение

A-Frame (https://aframe.io/) - это веб-фреймворк с открытым исходным кодом от Mozilla для создания опыта виртуальной реальности (VR).

  • Настроить среду и код / ​​дизайн с помощью Visual 3D Inspector очень просто.
  • Сущностно-компонентная архитектура
  • Он совместим с другими JS-фреймворками.
  • Кросс-платформенная поддержка

Привет, мир с А-образной рамой

Создайте html-файл в папке своего проекта и вставьте следующий код.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! - A-Frame</title>
    <meta name="description" content="Hello, World! - A-Frame">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Выполнить приведенный выше код легко, просто запустите простой http-сервер с помощью python -m SimpleHTTPServer. Вы также можете использовать Mongoose или npm install -g live-server && live-server.

И это все! Вы только что написали свою первую программу VR.

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

Давайте разберемся, что мы написали

В то время как уровень HTML выглядит базовым, HTML и DOM являются только внешним слоем абстракции A-Frame. Ниже A-Frame - это структура компонентов сущностей для three.js, которая предоставляется декларативно.

A-Frame предоставляет несколько элементов, таких как <a-box> или <a-sky>, называемых примитивами, которые обертывают шаблон сущность-компонент. Framework предоставляет множество предопределенных примитивов, но вы также можете создавать свои собственные.

В нашем примере используются некоторые из основных примитивов.

  • Сцена представлена ​​элементом <a-scene>. Сцена - это глобальный корневой объект, и все сущности содержатся внутри сцены.
  • Мы добавили 4 геометрических элемента a-box, a-сфера, a-цилиндр и a-плоскость.
  • Примитив неба добавляет к сцене цвет фона или изображение на 360 °. Небо - это большая сфера, цвет или текстура которой отображаются внутри.

A-frame предоставляет примитивы для создания сеток, рендеринга контента на 360 °, настройки среды, размещения камеры и т. Д.

Примитивы действуют как вспомогательный слой (то есть синтаксический сахар) в первую очередь для новичков. Имейте в виду, что примитивы - это <a-entity>s под капотом, которые:

  • Иметь семантическое имя (например, <a-box>)
  • Иметь предустановленный набор компонентов со значениями по умолчанию
  • Сопоставить или проксировать атрибуты HTML с компонентными данными

Под капотом этот <a-box> примитив:

<a-box color="red" width="3"></a-box>

представляет эту форму компонента-сущности:

<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>

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

Вы можете скачать код со страницы https://github.com/digvijayu/web_vr_hello_world

или посмотрите живую демонстрацию на https://digvijayu.github.io/web_vr_hello_world/index.html