Как создать первую программу с помощью AR.js и A-Frame

1. Устанавливаем необходимые инструменты

Привет всем! Итак, начнём с установки необходимых инструментов или обозначения установленных, их заменяющих.

1.1. Нам понадобится любая среда разработки: VSCode, WebStorm или что-нибудь другое.

1.2. GIT - обязательно. И желательно Git Bash. Иначе придётся делать в командной строке. Мне нравится Git Bash за удобство работы с GIT.

2. Создаём стандартный html-файл

Attention! Мы пишем <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> вместо <meta name="viewport" content="width=device-width, initial-scale=1.0"> для того, чтобы камера была без неприятного и неудобного увеличения.

3. Подключаем библиотеку AR.js

Прописываем подключение в разделе body:

4. Пишем AR-код

Из чего состоит данный код?

1. a-scene — это инструмент для создания и отображения 3D-пространства в дополненной реальности в веб-приложении. С его помощью можно добавлять различные объекты, анимации и визуальные эффекты. A-scene даёт возможность пользователям взаимодействовать с этим пространством: перемещать объекты и изменять их свойства в реальном времени.
2. a-marker — это инструмент для определения местоположения и распознавания маркеров в дополненной реальности. Он позволяет связать 3D-объекты с конкретным маркером, чтобы они отображались на экране устройства пользователя в зависимости от положения маркера. Его атрибут preset="hiro" позволяет программе понять какой маркер ей искать.
3. a-text - это инструмент для создания и отображения текста на экране устройства пользователя в режиме реального времени. Его атрибуты позволяют настраивать различные параметры текста, чтобы достичь желаемого визуального эффекта. С помощью A-text можно добавлять информацию, инструкции, подписи и другие текстовые элементы, которые улучшат пользовательский опыт в дополненной реальности. Например, position со значением «-1 -1 -2.7» размещает текст в пространстве (например, применяя значение -2,7, мы располагаем текст по вертикали, вы же можете поднять его ещё выше), а scale увеличивает или уменьшает размер текста (в нашем случае – увеличивает).

В итоге получился следующий код нашего первого AR-приложения:

5. Запускаем приложение

5.1. Для этого создаём репозиторий на гитхабе

Переходим по ссылке. Заполняем Repository name (название Вашего репозитория), ставим галочку на Add a readme file (она упростит клонирование репозитория) и нажимаем Create repository. В итоге Вы создали пустой репозиторий для запуска Вашего AR-приложения.

5.2. Клонируем репозиторий на свой ПК

Попав на страницу репозитория, жмём по зелёной кнопке Code и копируем значение из поля строки, кликнув по иконке сбоку.

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

Если решили воспользоваться Git Bash, то кликаете в выбранном месте правой кнопкой, выбираете Open Git Bash here, запускаете. Если же остановились на командной строке, то, кликнув правой кнопкой мыши, выбираете Открыть в терминале.

Вводите git clone и нажимаете комбинацию Shift Insert, чтобы вставилась скопированная строка с GitHub`a, затем Enter.

Открытый терминал не закрывайте!

5.4. Теперь нужно залить наш index.html на GitHub

Для этого вводим cd наименование Вашей склонированной папки, в следствие чего Вы попадёте в склонированную папку. Затем бросаем в неё наш index.html.

Теперь копируете в терминал следующие команды и нажимаете Enter:

Что они делают?

1. git add --all добавляет все изменения в отслеживаемые
2. git commit -m "my first commit" сохраняет теперь уже отслеживаемые изменения
3. git push отправляет (сохраняет) изменения (наш код) на GitHub

Ура! Наш код сохранён. И мы его не потеряем в случае утраты компьютера.

5.5. Теперь запускаем наш проект, включив GitHub Pages

Для этого:

а) Заходим в настройки проекта

б) Открываем в левом блоке вкладку Pages

в) Меняем branch с none на main и нажимаем save