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

В этом посте я собираюсь создать приложение WebVR. Я собираюсь использовать Aframe для WebVR.

Ладно, хватит разговоров, приступим к действию.

Шаг 1. Создайте файл HTML.

Шаг 2. Добавьте библиотеку Aframe в файл HTML.

Все, что вам нужно сделать, это добавить <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> под тегом заголовка.

Вот как будет выглядеть index.html.

<html>
  <head>
    <title>Intro to WebVR</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
  </body>
</html>

Шаг 3. Создайте сцену и добавьте небо и пол.

Прежде чем приступить к делу, я потрачу минуту, чтобы объяснить aframe систему и компоненты. Aframe - это набор различных HTML-тегов, с помощью которых мы можем создавать приложения WebVR. Это теги a-scene, a-entity, a-sky и т. Д.

Все компоненты приложения называются entity, и мы используем a-entity для определения компонентов. Это могут быть трехмерные формы, изображения, текст или трехмерные модели. Но в aframe уже определены некоторые объекты. Некоторые из них a-text, a-box, a-image, a-sky, a-plane. Эти объекты заключены в тег a-scene.

Теперь давайте напишем код. Добавьте эти строки под тегом body

<a-scene>
  <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Теперь вы можете открыть HTML-файл в браузере, и вы сможете это увидеть.

Тег a-sky создает фон в виде неба. Я дал ему сероватый фон. Я определил плоскость с помощью тега a-plane и дал ей поворот на -90,0,0, чтобы разместить ее по горизонтали. Как я уже сказал ранее, вам понадобится немного знаний о 3D-геометрии. Я дал ему высоту и ширину 100. Здесь единицы не будут в пикселях. Это будет в метрах. В Aframe мы используем метры вместо пикселей. Позиция (0,0,0). Это означает, что центр плоскости находится в точке (0,0,0), которая также является нашим исходным местоположением.

Шаг 4. Добавьте компоненты текста и формы

Теперь я добавлю эти три компонента в a-scene (под тегом a-scene).

<a-text position="0 3 -4" value="Hello World" width="10" color="#000000" align="center"></a-text>
<a-triangle color="blue" rotation="-90 0 0" position="0 0.2 -3"></a-triangle>
<a-cone color="tomato" radius-bottom="2" radius-top="0.5" position="0 4 -6"></a-cone>

Вот как это будет выглядеть:

Я использовал теги a-text, a-triangle, a-cone для создания этих сущностей. Вы можете перемещаться по сцене с помощью клавиш со стрелками, вы можете осматриваться с помощью трекпада / коврика для мыши.

Шаг 5. Давайте добавим изображение

Добавить изображение очень просто. Хороший способ - загрузить изображение как a-assets и использовать его как источник a-image. Добавьте этот код в a-scene.

<a-assets>
  <img id="dog" src="dog.png">
</a-assets>
<a-image src="#dog" position="0 1 -3"></a-image>

В Aframe a-scene все объекты отображаются с абсолютным позиционированием. Так что порядок объектов не имеет значения. Теперь посмотрим на приложение.

Это полный код до шага 5.

Шаг 6. Добавьте фон бесконечной среды

Наше приложение выглядит не очень хорошо. Так что я добавлю более качественный фон. Я собираюсь использовать aframe-environment-component библиотеку, чтобы добавить фон в наше приложение. Просто добавьте <script src=”https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script> под тегом заголовка.

Добавьте эту строку под a-scene и удалите a-sky и a-plane.

<a-entity environment="preset: forest"></a-entity>

Шаг 7. Добавьте элементы управления Oculus Go

Для этого шага вам понадобится гарнитура VR. Я использую Oculus Go, вы можете использовать любую другую гарнитуру. Вы можете прочитать документацию Aframe, чтобы узнать о поддержке других гарнитур VR.

Добавьте этот a-entity в a-scene.

<a-entity>
  <a-entity camera position="0 1.5 0" look-controls></a-entity>
  <a-entity oculus-go-controls></a-entity>
  <a-entity laser-controls="hand: right"></a-entity>
</a-entity>

Если вы откроете эту веб-страницу в браузере Oculus Go и войдете в режим VR. Вы сможете увидеть эту сцену в 360-градусном обзоре. Вы также увидите лазер, которым можно управлять с помощью контроллера.

Это полный код до шага 7.

Бонус: добавление событий в компоненты

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

<script>
document.getElementById('myCard').addEventListener('click', () => {
  //do something
})
</script>

Чтобы анимировать при наведении курсора, вам нужно будет определить такой объект:

<a-entity id="box" geometry="primitive: box" position="0 1.8 -3" animation__mouseenter="property: scale; from: 1 1 1; to: 1.5 1.5 1.5; startEvents: mouseenter; dur: 200" animation__mouseleave="property: scale; from: 1.5 1.5 1.5; to: 1 1 1; startEvents: mouseleave; dur: 200"></a-entity>

Вскоре я опубликую расширенное руководство по WebVR, которое подробно расскажет о событиях и анимации.

Спасибо за уделенное время.