Первое приложение на 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. Клонируем репозиторий на свой ПК

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

Нажатие кнопки Code

Копирование url

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

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

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

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

Открытие Git Bash

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

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

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

                                                
git add --all
git commit -m "my first commit"
git push

Успешное сохранение проекта на GitHub`е

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

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

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

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

Для этого:

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

Открытие настроек проекта

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

Открытие вкладки Pages

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

Изменение параметров GitHub Pages

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 над маркером. Отдалите камеру, чтобы увидеть и прочитать его целиком. 🤟💃

Как видите, всё просто. Но если не получилось или что-то непонятно, можете спросить ниже или связаться со мной.

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

Инструкция

Помощь