Как создать первую программу с помощью AR.js и A-Frame
Инструкция
1. Устанавливаем необходимые инструменты
Привет всем! Итак, начнём с установки необходимых инструментов или обозначения установленных, их заменяющих.
1.1. Нам понадобится любая среда разработки: VSCode, WebStorm или что-нибудь другое.
1.2. GIT - обязательно. И желательно Git Bash. Иначе придётся делать в командной строке. Мне нравится Git Bash за удобство работы с GIT.
2. Создаём стандартный html-файл
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My first AR app</title>
</head>
<body>
</body>
</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
Прописываем подключение в разделе head:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My first AR app</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
</body>
</html>
4. Пишем AR-код
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.5 0.5 0.5"
gltf-model="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
Из чего состоит данный код?
-
a-scene
— это инструмент для создания и отображения 3D-пространства в дополненной реальности в веб-приложении. С его помощью можно добавлять различные объекты, анимации и визуальные эффекты. A-scene даёт возможность пользователям взаимодействовать с этим пространством: перемещать объекты и изменять их свойства в реальном времени. -
a-marker
— это инструмент для определения местоположения и распознавания маркеров в дополненной реальности. Он позволяет связать 3D-объекты с конкретным маркером, чтобы они отображались на экране устройства пользователя в зависимости от положения маркера. Его атрибутpreset="hiro"
позволяет программе понять какой маркер ей искать. -
a-entity
- позволяет нам работать с моделью, ссылку на которую мы указываем в атрибутеgltf-model
. В данном примере я использую модель шлема. Также мы применяем атрибутposition
для указания местоположения модели относительно центра обзора, где «0 0 0» являются значениями «x y z». И применяем атрибутscale
, отвечающий за расширение или сужение модели, в зависимости от положительности или отрицательности значений. То есть мы указываем «0.5 0.5 0.5», следовательно у нас во-первых идёт расширение, так как значения положительные, а во-вторых оно идёт в 0.5 размера модели по всем трём осям (x, y, z).
В итоге получился следующий код нашего первого AR-приложения:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My first AR app</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.5 0.5 0.5"
gltf-model="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
5. Запускаем приложение
5.1. Для этого создаём репозиторий на гитхабе
Переходим по ссылке. Заполняем Repository name (название Вашего репозитория), ставим галочку на Add a readme file (она упростит клонирование репозитория) и нажимаем Create repository. В итоге Вы создали пустой репозиторий для запуска Вашего AR-приложения.
5.2. Клонируем репозиторий на свой ПК
Попав на страницу репозитория, нажимаем на
и копируем значение из поля строки, кликнув по иконке сбоку.
5.3. Теперь открываем диск С, ищем место, где будет лежать наш склонированный проект
Если решили воспользоваться Git Bash, то кликаете в выбранном месте правой кнопкой, выбираете Open Git Bash here, запускаете. Если же остановились на командной строке, то, кликнув правой кнопкой мыши, выбираете Открыть в терминале.
Вводите git clone
и нажимаете комбинацию Shift Insert, чтобы вставилась скопированная строка с GitHub`a, затем Enter.
Открытый терминал не закрывайте!
5.4. Теперь нужно залить наш index.html на GitHub
Для этого вводим cd наименование Вашей склонированной папки
, в следствие чего Вы попадёте в склонированную папку. Затем бросаем в неё наш index.html.
Теперь копируете в терминал следующие команды и нажимаете Enter:
git add --all
git commit -m "my first commit"
git push
Что они делают?
-
git add --all
добавляет все изменения в отслеживаемые -
git commit -m "my first commit"
сохраняет теперь уже отслеживаемые изменения -
git push
отправляет (сохраняет) изменения (наш код) на GitHub
Ура! Наш код сохранён. И мы его не потеряем в случае утраты компьютера.
5.5. Теперь запускаем наш проект, включив GitHub Pages
Для этого:
а) Заходим в настройки проекта
б) Открываем в левом блоке вкладку Pages
в) Меняем branch с none на main и нажимаем save
6. Наслаждаемся результатом
6.1. Cоздаём адрес в соответствие с шаблоном https://Ваш ник на GitHub.github.io/наименование Вашего репозитория. Например, у меня получился https://mianger22.github.io/ar_guide.
Сохраняем данный адрес, заливаем его в мессенджер, используемый Вами. Например, в Телеграмм.
6.2. Заходим по нему с телефона. Ура-а-а! Наше приложение запущено!
6.3. Теперь наводим камерой на следующий маркер (мы его указывали в коде тегом <a-marker preset="hiro">
- маркер по умолчанию)

Расположите камеру так, чтобы маркер был перпендикулярен смартфону. Ждём, пока наша программа проанализирует. В итоге у нас должен появиться текст My first AR app над маркером. Отдалите камеру, чтобы увидеть и прочитать его целиком. 🤟💃
Как видите, всё просто. Но если не получилось или что-то непонятно, можете спросить ниже или связаться со мной.