Обзор AR-конструктора ARTAR
Часть 2.
Словарь терминов, структура, описание, инструкция по работе, общие рекомендации.
Редактор представляет собой панель инструментов, которая состоит из трех вертикальных колонок. Слева отображено дерево элементов, по центру задаются значения для каждого типа объекта и в колонке справа находится визуальная часть редактора.
Ссылка на первую часть инструкции.
Словарь терминов.
Дерево элементов – структура объектов представленных в данном проекте.
Объект – это любой элемент в трёхмерном пространстве, из которого строится проект (AR-сцена). Каждый объект имеет тип с соответствующим набором параметров.
Тип объекта определяет его поведение и набор свойств. В нашем случае типы объекта – это group (группа), button (кнопка), primitive (примитив может быть изображением, видео, прозрачной стеной или объемной фигурой), model (трехмерный макет – 3D модель), text (текст).
Пресет (шаблон) – это файл с сохраненным набором настроек. (Другими словами с предустановленными параметрами/значениями).
Свойство (поле) - один из параметров объекта.
Визуальный 3D-редактор.
Окно справа, в котором можно видеть создаваемые объекты. Нажимаем кнопки клавиатуры со стрелками вверх (или W), вниз (или S), вправо (или A), влево (или D) для перемещения по сцене. Также можно зажать левую кнопку мыши или тачпада, чтобы смотреть по сторонам.
Обзор дерева элементов (колонка слева).
Объекты организованы в дерево для их удобной группировки и манипуляции несколькими объектами как одним целым.
У дерева объектов всегда есть корневой элемент, который называется scene и содержит все остальные объекты.
Сцена состоит из объектов, объект имеет тип и состоит из свойств, у свойств есть значения.
Добавление, удаление, копирование и перемещение объектов.
Добавление. В панели инструментов, расположенной в верхней части экрана, выбираем нужный тип объекта и нажимаем плюс.
Обратите внимание, добавляемый объект вложится в выделенный элемент и будет принадлежать «родителю», т.е. значения, которые мы задаем родителю будут непосредственно влиять на дочерний элемент. Это значит, что изменяя размер или например перемещая родительский объект мы перемещаем все вложенные в него дочерние объекты.
Для создания корректной структуры клонируйте шаблонные проекты и действуйте по аналогии.
Удаление. Для удаления объекта выделяем его и нажимаем крестик в панели управления (важно знать, что удаляя родительский объект мы удаляем все вложенные в него дочерние объекты).
Копирование. Выделяем объект, который хотим скопировать и нажимаем иконку «копировать» в панели управления. Объект копируется вместе со всеми подобъектами.
Перемещение. Выделяем объект, который хотим переместить, перемещаем курсор в нужное место и кликаем для вставки.
Параметры объектов.
(Обзор второй колонки AR-конструктора).
Выбираем в дереве элементов объект, которому хотим задать значения. Обратите внимание: настройки, доступные для разных типов объектов, несколько отличаются, но принцип работы один.
Разберем на примере объекта primitive. Начинаем с того, что выбираем тип текстуры: image (фото или изображение) или video (видеофайл) и текстуру (выбираем в выпадающем списке файл, который загрузили ранее).
В примере рассмотрим настройку параметров для фото.
В поле Геометрия выбираем опцию plane (плоскость), если хотим видеть фотографию в привычном плоском виде. Соответственно опция box разместит фото на кубе, circle сделает фото круглым, sphere представит его на сфере.
Далее можно изменить размер. В соответствующем поле увеличиваем или уменьшаем объект нажатием стрелок или удерживая левую кнопку мыши перемещаем мышь влево/вправо. Размер в 1 единицу соответствует размеру QR-кода (в отсутствие масштабирования).
Переходим к настройкам Позиция, Вращение и Масштаб. Эти поля есть у всех объектов. По умолчанию свойствам Позиция и Вращение заданы показатели 0 0 0. Масштаб имеет значения 1 1 1 и равен размеру QR-кода.
Изменяя значения в разделе Позиция, мы перемещаем объект в пространстве по трем осям х y z (влево/вправо; вверх/вниз; ближе/дальше).
Настройки вращения изменят угол наклона в трех плоскостях (х, у, z).В некоторых случаях необходимо задать наклон по оси х -90 для корректного размещения фото в пространстве.
Масштаб, соответственно, масштабирует объект и все вложенные в него объекты. Изменение размера в свойстве “Размер” не влияют на дочерние (вложенные) объекты. Плоские объекты можно масштабировать по двум плоскостям. Для отзеркаливания объекта необходимо установить отрицательные показатели.
Если мы поставим галку напротив Нажимается, то сможем задать анимацию реагирующую на события мыши (или тачпада). В нашем случае это не нужно, оставляем поле пустым.
Для отображения фото обязательно оставляем галку напротив Рисуется. Если ее убрать, то получим прозрачный объект (в каком случае это необходимо мы поговорим ниже).
Раздел Прозрачный оставляем без галки.В случае, если необходимо добавить прозрачность или задать соответствующую анимацию, ставим галку и переходим к появившейся ниже настройке Прозрачность.
Материал оставляем flat (это «чистый» фон). Опция standard накладывает на изображение блики и затенение.
Цвет в нашем случае белый, т.е. изображение останется без изменений. Изменяя в настройках цвет, цвета умножаются на цвета изображения и искажают его.
Анимация.
Некоторые свойства можно анимировать. Слева у таких полей находится значок бегущего человечка. При нажатии на него откроется панель анимаций этого конкретного поля. Нажимаем Add animation и задаем значения анимации. Мы не ограничены одной анимацией. Повторно нажав кнопку Add animation, можно задать следующую анимацию.
Разберем разделы анимации для различных свойств.
Позиция. В этом разделе задается анимация перемещения объекта в пространстве. Можно задать «вылет» объекта в одной, двух или трех плоскостях. Значения могут быть отрицательными и положительными. Соответственно, меняется сторона вылета.
Разберем на примере.
Нам нужно задать появление изображения слева (только в горизонтальной плоскости) через незначительное время после появления других объектов сцены. «Вылет» необходимо сопроводить звуком. Для этого нужно поменять значение только в первой ячейке (ось Х). Ось y и z нужно оставить без изменений. В нашем случае мы поставим -15 в значении Х (если поставить 15, то объект появится справа). При значении -100 объект будет лететь слишком быстро (в этом нет необходимости), с -1 мы будем видеть место старта анимации и не получим ожидаемого эффекта. Рекомендуем выбирать значение +/- 15.
Ставим галку напротив Обратно, если хотим, чтобы анимация началась со значений, которые мы указали в полях анимаци. Соответственно, если галку не ставить, то анимация начнется со значений указанных в полях Позиция и закончится значениями указанными в полях анимации. Рекомендуем задавать анимацию с галкой в поле Обратно.
Галка Относительно рассчитает значение в анимации относительно значения в объекте. Допустим, что у объекта позиция равна 3 4 5, и нам нужно его переместить по оси X на +5 единиц. Тогда с галкой в анимации нужно задать 5 0 0, а без галки - 8 4 5. Первое намного нагляднее, но можно использовать любой вариант. Мы ставим галку и задаем значения -15 0 0.
Далее задаем Длительность. Это время продолжительности анимации указанное в миллисекундах. Поставим 1000. Если нужен быстрый «вылет», уменьшаем это значение, если более плавный - увеличиваем.
Задержка. Поле где задается время через которое начнется анимация. Укажем 1500 миллисекунд. Если нужно запустить анимацию на «старте», ставим 0, если нужна длительная пауза перед запуском, увеличиваем значение в этом поле.
Функция ослабления. Во всплывающем списке выбирается тип анимации. При высоких скоростях (длительность до 1000) разницу сложно заметить, поэтому можно не придавать значение этому полю. При медленном появление объекта попробуйте разные варианты и выберите наиболее подходящий.
Событие старта. Событие инициирующее запуск анимации. В нашем случае можно выбрать только между first appear или appear. Первое запустит анимацию только один раз при появлении сцены, второе будет инициировать запуск при каждом наведении камеры на QR-код.
Как правило, лучше выбирать first appear, но выбор можно изменить в зависимости от количества объектов в сцене и от сложности анимации. Чем проще, тем с большей вероятностью можно выбирать appear.
В любом случае разницу можно заметить только если убрать камеру телефона с QR-кода после появления AR-проекта и не закрывая навести повторно. При выборе first appear анимация не сработает, при выборе appear повторится, как при первом запуске.
Если мы вернемся в общие настройки и поставим галку напротив поля Нажимается, то у нас появится возможность задать анимацию инициированную кликом по объекту. Mouseup (реакция на отпускание), mousedown (реакция на нажатие).
Звук. В этом поле можно выбрать один из звуковых эффектов или мелодий, который будет сопровождать появление анимации. Если оставить поле пустым, то звука соответственно не будет.
Запустить анимацию можно кликнув на иконку play. Мы увидим, как все работает и если допустили ошибку или необходимо изменить некоторые параметры, то это сразу можно сделать. Звук в редакторе не запустится, но сработает после открытия камеры в мобильном браузере, при появлении объекта.
Далее можно продолжить задавать параметры анимации в значении Позиция. Для этого нажимаем Add animation. Для сворачивание полей настроек нажимаем на иконку человечек. При нажатии на крестик поля закроются и анимация не сохранится. Сделайте так, если решили, что анимация по этому параметру для данного объекта не нужна. Если закрыли настройки анимации случайно, данное действие можно отменить кликом на иконку возвращающую на одно действие назад.
Далее можем задать анимацию(и) в полях свойства Вращение. Вращение объекта можно задать в трех плоскостях. Для корректной работы важно устанавливать значения параметров кратно 360. Многие объекты красиво смотрятся, если задать короткую и не быструю анимацию в одной плоскости. Также можно задать очень длинную медленную анимацию, которая будет работать все время пока среднестатистический пользователь будет просматривать AR-сцену.
Мы зададим следующие параметры 0 0 360.
Анимация свойств Масштаб, Цвет и Прозрачность задается по аналогии и не имеет особенностей.
Далее сохраняем AR-сцену. Возвращаемся в окно со вкладкой QR-код. Наводим на него камеру телефона и тестируем проделанную работу.
Поздравляем AR-проект создан!
Полезные ссылки:
Мы в соцсетях: