Первый проект
Сделаем AR-сцену по маркеру: наводите телефон на картинку, появляется 3D-объект, а по нажатию звучит звук. Всё, что здесь описано, точно так же работает и в больших проектах.
1. Создайте проект
Войдите на arclip.design и создайте проект. Вы попадёте в Studio с пустым space и одной сценой.
2. Выберите, когда сцена появляется
Откройте Scenes в левой панели, выберите сцену и задайте её триггер:
| Триггер | Сцена появляется, когда |
|---|---|
| 3D | сразу — без AR, удобно для проверки |
| Image | камера видит загруженную вами картинку |
| QR | отсканирован QR-код |
| Surface | посетитель ставит её на пол или на стол |
| Face | обнаружено лицо |
| 360 | открывается панорамное окружение |
Выберите Image и загрузите картинку, которую распечатаете или покажете на другом экране. Укажите её настоящую ширину — по ней движок понимает, какого размера должен быть контент.
Фотография отслеживается хорошо. Плоский логотип на белом — нет: камере не за что зацепиться. Важны контраст и нерегулярные детали, а не разрешение.
3. Добавьте что-нибудь видимое
Откройте Layers and assets и перетащите модель на канвас — либо нажмите + в верхней панели и добавьте примитив.
Двигайте, вращайте и масштабируйте объект инструментами, которые появляются рядом с выделением. Сетка размечена в единицах вашего проекта, так что метровый куб и правда будет метровым относительно маркера.
4. Задайте материал
Выделив объект, найдите Material в правой панели и нажмите Edit.
Standard — правильный выбор по умолчанию: задайте цвет, затем roughness. Именно roughness
делает основную работу: высокий — для ткани и камня, низкий — для полированного металла.
5. Заставьте его реагировать
Не снимая выделения, добавьте компонент Events, а затем само событие:
- Триггер: on click
- Шаг: воспроизвести звук — выберите аудиофайл
- Шаг: анимация трансформации — поднять на 0.2 м за 400 мс
Это готовое взаимодействие, без единой строчки кода.
Редактор рисует сцену, но намеренно не исполняет логику — иначе анимации мешали бы работать. Нажмите Preview, чтобы проверить.
6. Preview
Preview открывает проект таким, каким его видит посетитель. Проверьте нажатие, звук, анимацию.
Сцену по маркеру смотрите с телефона, наведя его на распечатанную картинку: на десктопе не видно, держится ли трекинг под углом, — а править обычно приходится именно это.
7. Публикация
Publish в верхней панели превращает проект в ссылку, которую можно открыть кому угодно. Адрес выдаётся сразу, а свой домен подключается в настройках проекта.
Публикуйте заново после каждого изменения — посетители видят последнюю опубликованную версию, а не вашу рабочую.
Куда двигаться дальше
| Вы хотите… | Читайте |
|---|---|
| Узнать, что делает каждая панель | Обзор интерфейса |
| Организовать проект побольше | Сцены и spaces |
| Поставить движение | Animation Controller |
| Собрать логику со значениями и условиями | Patch Editor |
| Добавить кнопки и счёт | UI Editor |
| Понять, как устроен движок | Creators Engine |
Дальше: Обзор интерфейса