# Создание AR-визитки

Отличным примером использования дополненной реальности является визитная карточка в AR.

{% embed url="<https://www.youtube.com/watch?v=q5O1aca0Ngo>" %}

В этой статье вы узнаете, как создать такую же сцену в редакторе MyWebAR.

## Создание проекта

Первое, что необходимо сделать — создать новый проект. Для этого перейдите на вкладку с проектами (**Dashboard**).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FeOHO5KySIx8yRr2RRyoE%2Fimage.png?alt=media\&token=52d1d9c6-6c42-446c-ad65-f38173ab2555)

Далее необходимо нажать на кнопку **Add new project**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F6ql9x2IdoKn88j0Pf3DD%2FArCard_1.jpg?alt=media\&token=61a789e0-7af3-4e56-95e5-d105e39fe6fe)

Откроется окно выбора типа трекинга.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FsUdMoxgnPZrfjbYFE8Za%2Fimage.png?alt=media\&token=8f5166d9-9cc4-4c4c-8749-f9880a99b5c7)

В данном случае нужно выбрать **AR on Images**, нажав на кнопку **Create**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FGWOmDcovTtgCZlkDMV3i%2FArCard_2.jpg?alt=media\&token=d994bd51-0276-49bc-b296-705d369d66d3)

{% hint style="warning" %}
Трекинг изображений недоступен на тарифном плане **Free**.

Для его использования необходимо перейти на тариф **Basic** или **Unlimited**, либо воспользоваться пробной версией MyWebAR.
{% endhint %}

После этого откроется окно добавления маркера. Здесь вы должны загрузить изображение вашей визитной карточки.

{% hint style="info" %}
О том, каким должен быть маркер-изображения смотрите в статье [kak-sdelat-khoroshee-otslezhivaemoe-izobrazhenie-dlya-dopolnennoi-realnosti](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/kak-sdelat-khoroshee-otslezhivaemoe-izobrazhenie-dlya-dopolnennoi-realnosti "mention")
{% endhint %}

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fqu29dguLsn25YXIWUY4y%2Fimage.png?alt=media\&token=de0e168d-6393-46f6-a740-613f17d183a8)

Далее необходимо нажать на кнопку **Upload Image**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F1qfTru1gfTBk9ZaCLyMB%2FArCard_3.jpg?alt=media\&token=744f7c80-7a5c-413f-9e62-16f5dfa82e32)

После этого произойдет переход на страницу редактора дополненной реальности.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FucrfQPiVXqmxz8s2Z0Jl%2Fimage.png?alt=media\&token=f1dfe4e5-2e57-4cad-bbf6-8707388c40e2)

## Наполнение сцены

В данном случае сцена будет состоять из:

* Нескольких 3D-моделей,
* 3D-модели аватара человека, с использованием плагина **Player Ready Me** (или просто 3D-модель),
* Видеофайла,
* Изображения

Разберем добавление каждого элемента по отдельности.

### Добавление 3D-моделей

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

#### Добавление объекта

Для добавления 3D-модели, нужно нажать на кнопку **+** в поле **Model 3D**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FERGPuQA3MX74AellKjyR%2FArCard_4.jpg?alt=media\&token=5f6b1c2e-fe99-4aab-b016-67f31c969d9d)

Откроется окно добавление модели.&#x20;

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FibUtw4jq3SC2Cb2Rzv44%2Fimage.png?alt=media\&token=c67d76fb-093e-42d7-a159-b02b93ea8b69)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FuK0XCvD3Px3dVbsUWUFp%2FArCard_5.jpg?alt=media\&token=30633a1d-b95f-4cb3-82b9-6c55fc1db50b)

После выбора объекта необходимо подождать некоторое время, пока он загрузится. После этого модель появится в окне предварительного просмотра.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FlG8DpaaREvyy558HO59Y%2Fimage.png?alt=media\&token=09a49f4d-626d-447c-af06-6d63fa14c98c)

Вы можете использовать встроенный оптимизатор модели, нажав кнопку **Use Optimized**. Или можно загрузить 3D-модель без оптимизации, нажав кнопку **Use Original**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FvnCMZmPjFaG6FWCaFV01%2FArCard_12.jpg?alt=media\&token=f85aeed4-50cc-4c33-a1a7-f1c7e81e77f8)

{% hint style="info" %}
Оптимизация модели помогает ускорить загрузку и работу сцены.
{% endhint %}

Окно закроется, и объект появится на сцене.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FUvezhUybQjxZi4nSRt0l%2Fimage.png?alt=media\&token=0033c347-44bc-4d30-ab24-fe5800b37441)

Теперь аналогичным образом нужно добавить еще иконки социальных сетей, например **Facebook** и **LinkedIn**, и разместить их перед маркером.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FRI0SqTLUuhf3t5n290ac%2Fimage.png?alt=media\&token=bb354cb7-0539-4f46-9a4e-843a5aaba689)

#### Добавление поведения "переход по ссылке"

Для того чтобы сделать 3D-иконки кликабельными, необходимо добавить [поведение](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/povedeniya-obektov).

Для этого нужно выбрать нужную модель, например **LinkedIn**, щелкнув по ней с правой стороны.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fj6JsiGOwhN35R1lfByLY%2FArCard_6.jpg?alt=media\&token=9981726b-6848-4d75-ab05-56518a960b0a)

Далее, в правой части, в блоке **Properties**, нужно нажать на кнопку **Add Action**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FuH2hpe0uwyjt58kDX3Xz%2FArCard_7.jpg?alt=media\&token=73eb81a1-5cfc-4485-80f2-2813ba98db5e)

Откроется окно с доступными поведениями.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F15r0sFsoYcgyAuig15Fe%2FArCard_8.jpg?alt=media\&token=4044c4a2-6862-419c-b78f-92192ea07a6a)

В списке нужно выбрать **Navigate to URL on click**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FwDWV956zo3h7HEi9VX8e%2FArCard_9.jpg?alt=media\&token=3ade633e-c9e6-4dcc-af0b-40c689e9fbe6)

Поведение появится в правой части.&#x20;

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F8HQ3x5UP8YXpL3u8F1FX%2FPlugins_11.jpg?alt=media\&token=4a0f1106-3bf3-427b-b111-de538418096b)

В этом случае необходимо изменить только параметр **url**. Это должна быть ссылка, например, на социальную сеть.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FPF8HlBa9JYWAT9PNj3vY%2Fimage.png?alt=media\&token=d32bd0a9-cfae-4b56-95da-b5298552475a)

Таким же образом нужно добавить поведение для остальных социальных сетей.

### Добавление 3D-аватара

Первое, что нужно сделать, это открыть страницу с доступными плагинами, нажав на кнопку **Extensions** в левой части.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fo7heYGkM7BjYljiiz2kO%2FArCard_13.jpg?alt=media\&token=fabdaf80-a2c8-4afe-9d36-9d31ae6fdf98)

Откроется окно для работы с плагинами.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fnjnxr2KLa6P8xWnC1BhE%2Fimage.png?alt=media\&token=f1c077a3-f29e-484f-8a30-c85c6ed870a8)

В данном случае нужен плагин **READY PLAYER ME**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F3epwtOjDkVujYTbtk3uo%2FArCard_14.jpg?alt=media\&token=ef0456d5-7e82-474b-a159-c78654304355)

Кликнув по нему, откроется модальное окно с описанием этого плагина.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fjd5uuvIHxebFItuI6FP4%2Fimage.png?alt=media\&token=f503711b-537d-420c-b7df-19cf7fa1db79)

Для его установки, нужно нажать кнопку **Install**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FNgCqt6H03roEipZo3p25%2FArCard_15.jpg?alt=media\&token=0ecb3350-e775-4e62-b667-417b340a5935)

После этого у вас снова откроется редактор сцены, то есть вкладка **Content**.

Добавленный плагин появится в списке объектов слева. Для его добавления нажмите на кнопку **+**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F5QqhqMyyC7YXTYSjJNx4%2FArCard_16.jpg?alt=media\&token=b2c4f5d3-ede9-48db-a4f7-35a174344fa3)

Откроется окно добавления объекта. В этом окне вы будете создавать аватар шаг за шагом.

Первое, что вам нужно сделать, это выбрать тип тела (по половому признаку).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FCedG2G5vfG8Ok13mrmxQ%2Fimage.png?alt=media\&token=b8e6cce6-8548-439c-9a5d-f635ad263679)

Далее необходимо загрузить свое изображение (или сделать селфи).

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fnza0cR69uH9h9OM3Ma0l%2Fimage.png?alt=media\&token=e3eb8ab0-5596-495e-bbf5-659aef230be4)

Выбранная фотография появится в окне предварительного просмотра. Чтобы продолжить, нажмите кнопку **Accept**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FQ5QU3peym7ecshJE4a90%2Fimage.png?alt=media\&token=becad7fc-50f0-41c3-9896-cb65ae406fae)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FMqTTNaLW9HcUYZAyKxN3%2Fimage.png?alt=media\&token=d494313d-fdb2-40df-a3c2-43d0c007cf4c)

После обработки вы увидите получившийся 3D-аватар. Кроме того, вы можете изменить его по своему усмотрению.

Для продолжения нажмите кнопку **Next**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FTsjap6XEam71r8CIsoOC%2Fimage.png?alt=media\&token=c3e53acb-18f0-46f0-87f0-a4e595b3268e)

Следующий шаг - создать учетную запись, чтобы сохранить полученный аватар, или просто продолжить, нажав на кнопку **Continue without signup**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fxt04MwQeyJEbqrxJa36w%2Fimage.png?alt=media\&token=863ab2ac-11f8-4e6f-a67c-51aa06b70b22)

После того как аватар будет обработан, он появится на сцене.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FYn1DmpGt3KomuYYZvAnQ%2Fimage.png?alt=media\&token=577e274f-df4e-4ef0-b314-1da6ae230c05)

### Добавление видеофайла

Чтобы добавить видеофайл, нажмите кнопку **+** в поле **Video**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FafjhAzs8pJCudJAZWvij%2FPlugins_13.jpg?alt=media\&token=0c5bbe9c-7586-4e6d-be88-385498cda107)

Откроется окно добавления видеофайла.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F2D0kcpXd3ADcMO6iVksb%2Fimage.png?alt=media\&token=5064d80b-1df0-47af-9414-8f80e187c3b8)

В данном окне нужно нажать на **Upload** в нижней части окна.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FvJxz77Ww8V5ywcdnmqAO%2FPlugins_14.jpg?alt=media\&token=2bf6ce4a-d696-489c-8d1e-8601f953f72d)

Откроется модальное окно для загрузки видео.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FS8wrJdnHzlO9CbWMUqGd%2Fimage.png?alt=media\&token=0f593cbe-1029-49db-b8c7-17ac89dfb88e)

Для загрузки вы можете перетащить вашу модель прям в это окно, либо нажать на кнопку **Upload** для того, чтобы выбрать из файлов вашего устройства.

После короткого ожидания откроется окно кастомизации видеофайла.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F67jTNWiP3wGg45I51yiF%2Fimage.png?alt=media\&token=cd089dbb-b566-4983-9e79-b8887cedbc7b)

В данном случае вы можете включить следующие параметры: автовоспроизведение и зацикливание и нажать кнопку **Next**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FsajYqdxAQt8RCyHL1m3y%2Fimage.png?alt=media\&token=e0c7d27b-cdda-4a47-bdbd-4fd3afc923db)

Видеообъект нужно переместить в верхнюю часть визитки.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F2AYNWnR1FXqzc5DKMWs0%2Fimage.png?alt=media\&token=7ff864bb-47cc-42ef-8048-f1b6e59708d6)

### Добавление изображения

Чтобы добавить изображение, нажмите кнопку **+** в поле **Photo**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FHAXm20CFkIQIZnYegEpr%2FPlugins_15.jpg?alt=media\&token=0f9def0e-245e-469e-80df-839b3ba43010)

Откроется окно добавления изображения.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FDzO9wEMKeT7wqJKSqsfs%2Fimage.png?alt=media\&token=0d0a8bb1-ce78-495e-91ba-4b278692ca27)

В данном окне нужно нажать на **Upload** в нижней части окна.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FVeGCzyLIHyKxKT75BE14%2FPlugins_16.jpg?alt=media\&token=02cca756-533a-4c30-a3a7-b62e26df8153)

Чтобы загрузить изображение с устройства, нажмите **Upload** или перетащите изображение в это окно.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FXIq2pFZR7xZ0xdnZNUnl%2Fimage.png?alt=media\&token=ad560c60-73b9-4d18-ab1d-aa21b8d66d61)

После короткого ожидания откроется окно кастомизации видеофайла.

Этот объект следует переместить в нижнюю часть визитной карточки, под 3D-иконки.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FXL0dKBZQVqkPkaEkWJ0T%2Fimage.png?alt=media\&token=4b609a82-c11a-4879-8e1d-76b9dbce424a)

## Результат

Таким образом получится подобная сцена.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FXZDXGIg54nPfIkg8vBUU%2Fimage.png?alt=media\&token=99829332-41e9-4c92-b64f-8da191074ab6)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fw4tQU13RdPtFDYEgweXT%2Fimage.png?alt=media\&token=6ae28b18-1925-4403-af0e-d4daa23fd3dc)

В открывшемся браузере наведите камеру на изображение ниже:

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F1XalTA9VwGH5E5cKVnNd%2F_Cream%20Pink%20Pastel%20Feminine%20Aesthetic%20Beauty%20Salon%20Nail%20Art%20Makeup%20Artist%20Business%20Card%20%20.jpg?alt=media\&token=9809edf2-9452-475d-9b05-3dd5700aeb7f)