Введение
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