Первый проект

Соберите и опубликуйте небольшую AR-сцену примерно за десять минут. Вы наводите телефон на картинку, появляется 3D-объект, а если нажать на него, он поднимается.

Большие проекты собираются теми же шагами.

1. Создайте проект

Войдите на arclip.design и создайте проект. Откроется Studio с пустым пространством и одной сценой.

2. Выберите, когда появится сцена

У каждой сцены есть триггер — условие, при котором она появляется.

1. Откройте Сцены в панели навигации слева.
2. Выберите свою сцену.
3. Выберите триггер Изображение.
4. Загрузите картинку, которую вы напечатаете или покажете на другом экране.
5. Укажите настоящую ширину картинки. По ней AR Clip покажет ваш контент в правильном размере.

Все триггеры, из которых можно выбрать:

Триггер	Сцена появляется, когда
3D	сразу — без AR, удобно для проверки
Изображение	камера видит загруженную вами картинку
QR	сканируют QR-код
Поверхность	посетитель ставит её на пол или стол
Лицо	камера находит лицо
360°	открывается панорамное окружение

Чтобы привязать контент к реальному месту, которое вы заранее отсканировали, выберите Поверхность и включите Использовать VPS — см. VPS-сцены.

Берите детальную картинку

Фотографии отслеживаются хорошо. Плоский логотип на белом фоне — плохо: камере не за что зацепиться. Контраст и неравномерные детали важнее разрешения.

3. Добавьте объект

Откройте Слои и ассеты и перетащите модель в сцену. Или нажмите + в верхней панели, чтобы добавить простую фигуру, например куб.

Двигайте, вращайте и масштабируйте объект панелью инструментов рядом с ним. Сетка использует единицы вашего проекта, поэтому куб в один метр рядом с настоящей картинкой будет шириной один метр.

4. Задайте материал

1. Выделите объект и найдите Материал в панели справа.
2. Нажмите на слот материала. Откроется панель Редактировать материал.
3. Оставьте тип Стандартный. Задайте цвет, потом шероховатость.

Сильнее всего внешний вид меняет Шероховатость. Для ткани и камня ставьте её высокой, для полированного металла — низкой.

5. Научите объект реагировать на нажатие

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

1. Не снимая выделения, добавьте компонент Состояния. Первое состояние хранит объект таким, какой он сейчас.
2. Нажмите добавить состояние. Новое состояние станет выбранным. Поднимите объект на 0.2 м.
3. Снова нажмите на первое состояние. Объект опустится обратно.
4. Добавьте компонент События. В нём уже есть одно событие с триггером Нажатие на объект.
5. Нажмите на событие, чтобы открыть его. В блоке При клике или тапе нажмите + добавить действие и выберите Переключить состояние.
6. В поле Состояние выберите второе состояние. Задайте Длительность 400 мс.

Это полноценное взаимодействие, и без кода.

Добавьте звук

В событиях нет шага, который проигрывает звук. Чтобы звук играл по нажатию, используйте патч: его нода Проиграть звук проигрывает аудиофайл при каждом запуске → Редактор патчей.

Пока вы редактируете, логика не работает

Редактор показывает сцену, но не запускает её логику, чтобы анимации не мешали работать. Чтобы проверить, нажмите Предпросмотр.

6. Предпросмотр

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

Сцену с картинкой проверяйте на телефоне: наведите его на напечатанную картинку. На компьютере не видно, держится ли отслеживание под углом, а подстраивать обычно приходится именно это.

7. Опубликуйте

Нажмите Опубликовать в верхней панели. Проект станет ссылкой, которую может открыть кто угодно. Вы получите готовый адрес, а в настройках проекта можно подключить свой домен.

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

Что дальше

Вы хотите…	Читайте
Узнать, что делает каждая панель	Интерфейс
Организовать большой проект	Сцены и пространства
Настроить движение на таймлайне	Анимация
Собрать логику со значениями и условиями	Редактор патчей
Добавить кнопки и счёт на экране	Редактор UI
Понять, как ведёт себя движок	Creators Engine

---

Дальше: Интерфейс — что делают все панели и кнопки Studio.