Введение в создание вашей первой среды виртуальной реальности

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

Вот что вы узнаете к концу этого руководства:

  • Как выглядит язык A-Frame
  • Как создавать 3D-фигуры
  • Как поместить 3D-фигуры в 360-градусное фото
  • Каковы строительные блоки проекта A-Frame?

Часть 1

A-Frame — это язык разметки

Не беспокойтесь о том, что это слишком много значит, но, говоря в широком смысле, языки разметки («ML» в HTML) оборачивают читаемый человеком текст аннотациями, чтобы компьютеры могли отображать этот текст.

Возможно, вы видели пример языка разметки в действии. В этом примере мы рассматриваем блок HTML.

<p>
This is a paragraph of text written in HTML. <b>This is some bold text</b>
</p>

Эти теги обрамляют текст открывающими ‹› и закрывающими ‹/› тегами.

Это все, что мы собираемся узнать о языках разметки в целом на данный момент.

Часть 2

Единственное, что вам нужно, это веб-браузер

Другие среды виртуальной реальности создаются с использованием мощных игровых движков, таких как Unreal или Unity. Нам не нужно беспокоиться о загрузке и установке тяжелого программного обеспечения, мы просто будем использовать Glitch. Glitch — это действительно отличная онлайн-среда разработки/совместная работа/тестовое пространство/песочница, которая позволяет вам повторно использовать работу других людей. Это отличный способ погрузиться в проект. Это не заменит чтение документации, но может помочь, если вы предпочитаете работать над чем-то во время обучения.

Сначала создайте учетную запись Glitch. "Затем перейдите на эту страницу".

Далее вам нужно нажать «Просмотр исходного кода» и «Ремикс для редактирования» в правом верхнем углу. Это создаст вашу собственную версию проекта в вашей учетной записи Glitch.

Затем, если вы нажмете «Показать» (вверху справа), а затем «рядом с кодом», вы сможете увидеть, что дает вам код слева.

Часть 3

Между тегами ‹head›‹/head› вы можете увидеть, ближе к закрывающемуся тегу head, этот фрагмент кода:

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

Это то, что браузер использует, чтобы знать, что мы работаем в A-Frame, и отображать наш код в том виде, в котором форматирован A-Frame. Если этого кода нет, ваш код не будет работать.

В разделе ‹body› вашего кода мы размещаем все, что хотим отобразить на веб-странице. Мы используем A-Frame, поэтому нам нужно использовать теги ‹a-scene›‹/a-scene› и разместить все необходимое внутри этих тегов.

В A-Frame есть несколько способов сделать все аккуратно и легко. Одним из таких способов является использование библиотеки ресурсов для хранения изображений в одном месте. Хотя для компьютера не имеет значения, где вы храните весь свой код, если он находится в правильных тегах, это будет иметь значение для вас в будущем, а также для всех, кто ремикширует ваш код. Старайтесь, чтобы все было последовательно, вы всегда можете добавить комментарии к своему коду. Комментарии обычно выделяются курсивом или другим цветом (в приведенном ниже примере это не так только потому, что Medium отображает код таким образом, но вы можете увидеть, как они отформатированы в примере на картинке выше).

<!-- This comment tells you that this is an asset library - a fancy word for a list of assets your environment will use -->
<a-assets>
        <img
          id="library"
          crossorigin="anonymous"
          src="https://i.imgur.com/cJFQpL1.jpg"
        />
</a-assets>

Первая часть кода внутри вашего тега ‹a-assets› — это тег img. Затем за ним следуют атрибуты, обычно это все, что имеет после него знак равенства, например id=или src=

Идентификатор важен, потому что именно его мы собираемся использовать для ссылки на это изображение за пределами нашей библиотеки ресурсов. src важен, потому что это адрес, с которого исходит фотография. Для этого упражнения мы используем общее изображение, доступное в A-Frame, но в будущем вы, возможно, захотите использовать свою собственную фотографию или другой фон, который подходит для ваших целей.

Здесь стоит отметить, что все, что вы хотите сделать, скорее всего, будет описано в документации, что очень, очень хорошо в случае с A-Frame.

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

<a-sky id="img-360" radius="10" src="#library"></a-sky>

В атрибуте src мы можем использовать идентификатор, который мы дали нашему 360-градусному изображению в библиотеке активов, используя # перед ним. Попробуйте изменить src на «#egg». Вы увидите, что оно исчезает, потому что нет изображения с id «яйцо». Вы можете использовать фактический исходный адрес здесь, но он выглядит аккуратнее и его проще использовать в будущем, если вы сохраните все в библиотеке активов. Это означает, что если вы поместите другое изображение в библиотеку активов и захотите использовать его более одного раза, вам нужно будет отредактировать его только один раз, если необходимо внести какие-либо изменения, а не трудоемкое упражнение по поиску и замене. что не кажется проблематичным сейчас, когда у нас есть только крошечная страница кода, но если есть несколько экземпляров одного и того же изображения, которое нужно изменить на протяжении 1000 строк кода, это совсем другая история!

Часть 4

Давайте попробуем добавить что-нибудь в нашу комнату. Скажем, нам нужна большая коробка в комнате. Попробуйте добавить этот код:

<a-box
        position="0 2 -5"
        rotation="0 45 45"
        scale="2 2 2"
        color="#4CC3D9">
</a-box>

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

Если вы участвуете в семинаре, в течение следующего часа вы сможете поиграть с A-Frame и посмотреть, на что вы способны. НЕ ЗАБУДЬТЕ использовать носители с лицензией Creative Commons или другой общедоступной лицензией. То, что вы нашли что-то в Интернете, не означает, что вы можете использовать это бесплатно.

Следующие шаги

Привыкайте читать документацию. Вся документация — ваш друг, но с некоторыми документами дружить лучше, чем с другими. Единственный способ выяснить, хороша ли документация, — это погрузиться прямо в нее. Мне очень нравится документация A-Frame, я думаю, что она действительно хорошо справляется со всем, что вам может понадобиться, она предоставляет примеры, учебные пособия и справку с возможностью поиска. Это так хорошо, как вы собираетесь получить. Не бойтесь и не стыдитесь искать вещи. Нельзя ожидать, что кто-то запомнит все теги, активы и порядок, в котором все идет. Все профессиональные инженеры-программисты/программисты регулярно сверяются с документацией, и если они говорят вам, что не , это ложь. Я имею в виду это искренне.

Ремиксы проектов на Glitch. Проекты, которые есть на Glitch, доступны для ремиксов в новые проекты, это одно из основных преимуществ платформы. Вы немного использовали его на этом семинаре, но есть еще много всего, что можно попробовать!