Компонент "Просмотр 3D-моделей" и 3D-редактор

Этот компонент не поддерживается на платформах "Google Реклама" и Google AdMob, а также в объявлениях AMPHTML, видеорекламе и графических объявлениях.

Компонент "Просмотр 3D-моделей" позволяет встроить в объявление трехмерную модель в формате GLB, которую пользователь, просматривающий объявление, может вращать, панорамировать, приближать и отдалять. Вы также можете настроить модель в 3D-редакторе приложения Google Web Designer.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Совместимость с браузерами

В Microsoft Edge не поддерживается компонент "Просмотр 3D-моделей".

Добавление компонента "Просмотр 3D-моделей" в проект

1. Откройте панель Компоненты, а затем – папку Графика и эффекты.
2. Перетащите компонент Просмотр 3D-моделей в рабочую область.
3. На панели Свойства в разделе Просмотр 3D-моделей укажите GLB-файл, который вы хотите использовать в качестве источника. Нажмите кнопку Обзор и выберите нужный файл в файловой системе компьютера.
4. Дважды нажмите на компонент в рабочей области, чтобы открыть диалоговое окно 3D-редактора и настроить модель. Когда все будет готово, нажмите Сохранить.

Вы можете задать в приложении Google Web Designer параметры, которые позволят автоматически создавать компонент "Просмотр 3D-моделей" при перетаскивании GLB-файла в рабочую область. Для этого нажмите Правка > Настройки > Компоненты.

Свойства

Информация о компоненте приводится на панели "Свойства". Чтобы увидеть ее, нужно выйти из 3D-редактора.

Свойство	Описание
Имя	Название компонента "Просмотр 3D-моделей".
Источник	Исходный GLB-файл для 3D-объекта. Размер файла объекта не должен превышать 3 МБ. Дополнительные требования вы найдете в руководстве по работе с 3D-объектами. Чтобы проверить GLB-файл на наличие ошибок, используйте Khronos glTF Validator.

Дополнительные свойства

Свойство	Описание
Значок метки жеста	Изображение, которое показывается над трехмерной моделью и предлагает пользователю с ней взаимодействовать. Метка жеста слегка движется, привлекая внимание пользователя, пока не будет достигнуто ограничение по продолжительности анимации, и исчезает, когда пользователь начинает взаимодействовать с моделью. Можно связать с динамическими данными.
Текст метки жеста	Текст, который показывается под значком метки жеста. Применяется, только если указан значок метки жеста. Можно связать с динамическими данными.
Задать ограничение по продолжительности анимации	Установите этот флажок и задайте продолжительность в секундах, чтобы ограничить время, на протяжении которого показывается анимация метки жеста. Можно связать с динамическими данными.

3D-редактор

Откройте диалоговое окно 3D-редактора.

• Для этого дважды нажмите на компонент в рабочей области.

Вы увидите 3D-модель в режиме предварительного просмотра. Ее можно вращать, приближать и отдалять. Также вы можете взаимодействовать с любыми активными элементами.

Чтобы настроить модель, используйте панель справа. Выбрать нужные параметры можно на двух основных вкладках: GLB и Компонент.

Вкладка GLB

Изменения, сделанные на вкладке GLB, сохраняются в исходном файле модели в папке объектов. Это относится ко всем графическим файлам, которые используются в качестве текстур и будут объединены в файле GLB. Вы можете задать в приложении Google Web Designer параметры, которые позволят автоматически удалять неиспользуемые текстуры.

Информация о файле GLB
Источник	Исходный GLB-файл для 3D-модели. Это поле доступно только для чтения. Чтобы выбрать другой исходный файл, закройте диалоговое окно 3D-редактора и измените для компонента свойство Источник на панели Свойства.
Подробные сведения	Размер – размер исходного файла.
Материалы
Материалы	За один раз можно настроить только один материал. Выбрано. В этом раскрывающемся списке перечислены все материалы, используемые в 3D-модели. Выберите материал, который хотите посмотреть или изменить.
Основной цвет	Начальный цвет и текстура для использования в текущем материале.
Металлик/шероховатость	Свойства "Металлик" и "Шероховатость" определяют, как от материала отражается свет. Текстура. Выберите текстуру, чтобы указать, какие части материала будут с металлическим отливом. Металлик. Выберите значение от 0 до 1: оно определит интенсивность металлического отлива. Чем больше этот показатель, тем больше окружающего света отражает материал. Шероховатость. Выберите значение от 0 до 1: оно определит, насколько материал будет матовым, а отражения – четкими. Значение 0 соответствует полному светоотражению, а значение 1 – полной матовости.
Обычная карта	Выберите текстуру, чтобы сделать поверхность материала рельефной и неровной.
Свечение	Выберите цвет и текстуру, которые помогут передать свечение материала.
Затенение	Выберите текстуру для передачи теней, возникающих при использовании общего освещения.
Другое	Задайте дополнительные параметры для материала. Двусторонние. Установите этот флажок, если хотите сделать материал двусторонним. Альфа-смешивание. Выберите, как следует применять альфа-значения (показатели прозрачности) к текстурам: Непрозрачный. Альфа-значения игнорируются, текстура всегда остается полностью непрозрачной. Смешивание. Альфа-значения в диапазоне между 0 и 1 делают текстуру в разной степени прозрачной. Маска. Каждый фрагмент текстуры либо полностью прозрачный, либо полностью непрозрачный. Это зависит от того, как его альфа-значение соотносится с указанным значением параметра Альфа-отсечка. Если альфа-значение превосходит значение отсечки, фрагмент обрабатывается как непрозрачный.

Вкладка "Компонент"

Изменения, сделанные на вкладке Компонент, отображаются в компоненте "Просмотр 3D-моделей", а не в исходном файле GLB.

Файлы HDR

Графические файлы в формате HDR (High Dynamic Range) можно использовать в качестве фона и для моделирования освещения. Размер файла HDR не должен превышать 150 КБ. Чтобы не превысить этот лимит, рекомендуем изменять размер больших HDR-изображений на 256 x 128 пикселей.

Презентация
Фон	Изображение. Выберите изображение или среду (файл HDR), которые будут использованы в качестве фона. Можно связать с динамическими данными.
Освещение среды (HDR)	Вы можете использовать освещение, смоделированное на основе фотографии. В результате вы получите свет, характерный для естественных условий. Изображение. Выберите сферическое изображение в формате HDR. Можно связать с динамическими данными. Экспозиция. Укажите уровень экспозиции. Интенсивность тени. Выберите степень непрозрачности теней. Мягкость тени. Укажите, насколько размытыми должны быть тени.
Анимация	Если в исходном GLB-файле есть анимация, вы можете включить ее автоматическое воспроизведение. В настоящее время 3D-редактор не поддерживает создание анимации. По умолчанию. Выберите уже созданную анимацию, чтобы использовать ее по умолчанию. Автовоспроизведение. Установите этот флажок, чтобы выбранная по умолчанию анимация воспроизводилась при загрузке компонента. Длительность анимации. Установите этот флажок и укажите период (в секундах), в течение которого анимация будет воспроизводиться, прежде чем автоматически приостановиться.
Камера
Исходное направление камеры	Исходное направление камеры определяет ее настройки при загрузке компонента. Если заданы какие-либо из перечисленных ниже ограничений на вращение камеры или на изменение масштаба съемки, то они применяются принудительно. Отклонение. Определяет, насколько сильно камера вращается вокруг вертикальной оси. Значение дается в градусах. Наклон. Определяет, насколько сильно камера вращается вокруг горизонтальной оси. Значение дается в градусах. Масштаб. Определяет степень приближения камеры к модели. Использовать текущее направление как исходное. Нажмите эту кнопку, если вы настроили направление камеры в режиме предварительного просмотра диалогового окна 3D-редактора и хотите использовать текущее направление в качестве исходного.
Ось вращения	Это точка в трехмерном пространстве, вокруг которой вращается камера. По умолчанию она установлена в центре трехмерной модели. X – координата оси вращения на оси X. Y – координата оси вращения на оси Y. Z – координата оси вращения на оси Z. Сбросить – позволяет восстановить координаты оси вращения.
Зона обзора	Вертикальная зона обзора камеры. Угол. Угол от 1° до 179°.
Пределы вращения камеры	Если вам нужно ограничить доступный диапазон вращения для модели, установите флажок Отклонение или Наклон и укажите минимальный и максимальный угол. Отклонение (в стороны). Определяет пределы вращения камеры вокруг вертикальной оси. Наклон (вверх и вниз). Задает пределы вращения камеры вокруг горизонтальной оси.
Ограничения масштаба камеры	Тип. Укажите, нужно ли ограничить возможность пользователей изменять масштаб. Неограниченное расстояние от камеры до объекта. Ограничения не заданы. Это значение выбрано по умолчанию. Ограниченное расстояние от камеры до объекта. Установите нужный диапазон, указав минимальное и максимальное расстояние. Уровень масштабирования в поле Мин. должен быть меньше значения, указанного в поле Макс. Фиксированное расстояние от камеры до объекта. Пользователь не сможет изменять уровень масштабирования. В полях Мин. и Макс. необходимо установить одинаковые значения.
Активные элементы
Активные элементы	Активные элементы – это точки на трехмерной модели, с которыми могут взаимодействовать пользователи. При нажатии на активный элемент могут появляться подсказки или запускаться настроенные вами события. Добавить активный элемент. Создайте активный элемент. Нажав эту кнопку, укажите точку на трехмерной модели, где вы хотите создать активный элемент. Для настройки активного элемента используйте перечисленные ниже поля. Имя. Название активного элемента. Чтобы удалить активный элемент, нажмите на значок Удалить рядом с его названием. Подсказка. Укажите, будет ли появляться подсказка при нажатии на активный элемент: Нет. Подсказка появляться не будет. Подсказка. Подсказка будет появляться. Название. Заголовок подсказки. Можно связать с динамическими данными. Описание. Текст подсказки. Можно связать с динамическими данными.
Изображение	Вы можете настроить внешний вид активных элементов с помощью изображений для разных случаев. Для всех активных элементов используется один и тот же набор картинок. Изображение для состояния "Кнопка не нажата". Картинка по умолчанию, которая показывается, когда пользователь не взаимодействует с активным элементом. Изображение для состояния "Кнопка нажата". Картинка, которая показывается, когда пользователь нажимает на активный элемент. Изображение для состояния "На кнопку наведен указатель". Картинка, которая показывается, когда пользователь наводит указатель мыши на активный элемент. Размер. Высота и ширина активного элемента.
Стили подсказок	Настройте внешний вид подсказки, выбрав цвета для ее элементов. Цвет шрифта. Выбранным цветом будут написаны заголовок и текст подсказки. Цвет фона. Цвет, который будет использован для фона подсказки. Цвет границы. Этим цветом будут обведены границы подсказки.

События и действия

События

С помощью событий можно инициировать другие действия в объявлении. Компонент "Просмотр 3D-моделей" отправляет следующие события:

Событие	Описание
Трехмерная сцена отрисована	Отправляется, когда впервые отрисована сцена с трехмерной моделью.
Камера изменена	Отправляется при изменении свойств трехмерной камеры. Если параметры камеры изменил пользователь, объект event.detail содержит свойство source: user-interaction.
Активный элемент нажат	Отправляется при нажатии на активный элемент, заданный в 3D-редакторе. Название нажатого активного элемента, его индекс в списке активных элементов сцены и координаты на экране по осям X и Y содержатся в объекте event.detail.
Взаимодействие начато	Отправляется, когда пользователь начинает взаимодействовать с трехмерной моделью.
Взаимодействие завершено	Отправляется, когда пользователь перестает взаимодействовать с трехмерной моделью.

Чтобы выбрать одно из этих событий в диалоговом окне "Событие", установите компонент "Просмотр 3D-моделей" как цель.

Действия

Другие события могут инициировать перечисленные ниже действия в компоненте "Просмотр 3D-моделей".

Событие	Описание	Параметры настройки
Задать отклонение	Задает указанное отклонение модели (вращение по вертикальной оси) и приостанавливает анимацию.	Отклонение. Угол отклонения в градусах.
Задать конечное отклонение	Плавно вращает модель до заданного отклонения.	Конечное отклонение. Угол отклонения в градусах (от -360 до 360).
Задать целевой наклон	Плавно вращает модель до заданного наклона (вращение по продольной оси).	Конечный наклон. Угол наклона в градусах.
Увеличить значение целевого наклона	Плавно вращает модель до целевого наклона на заданное количество градусов. Если модель уже достигла целевого наклона, ничего не произойдет.	Дельта наклона. Количество градусов, которое нужно добавить к текущему значению наклона.
Задать целевой масштаб	Плавно масштабирует модель до заданного значения.	Целевой масштаб. Масштаб в метрах.
Увеличить значение целевого масштаба	Увеличивает целевой масштаб (в метрах).	Дельта масштаба. Используйте отрицательное значение, чтобы увеличить масштаб.
Задать целевое вращение	Изменяет точку, вокруг которой выполняется вращение, и плавно перемещает камеру в место, где она может вращаться вокруг этой точки.	Целевое вращение по оси X. Положение на оси X в метрах. Целевое вращение по оси Y. Положение на оси Y в метрах. Целевое вращение по оси Z. Положение на оси Z в метрах.
Задать целевое локальное панорамирование	Плавно перемещает камеру в новое положение.	Целевое локальное панорамирование по оси X в метрах. Целевое локальное панорамирование по оси Y в метрах.
Задать цвет материала	Задает цвет материала.	Название материала Красный. Красное значение нового цвета (от 0 до 1). Зеленый. Зеленое значение нового цвета (от 0 до 1). Синий. Синее значение нового цвета (от 0 до 1).
Воспроизвести анимацию	Воспроизводит заданную анимацию.	Название анимации
Приостановить анимацию	Приостанавливает заданную анимацию.	Название анимации
Задать время анимации	Перематывает на указанное время анимации.	Название анимации Время анимации. Время, на которое нужно перемотать (в секундах).

Выбрав одно из этих действий в диалоговом окне "Событие", установите компонент "Просмотр 3D-моделей" в качестве получателя.

Дополнительные методы (с использованием API)

Чтобы использовать дополнительный метод, нужен специальный код.

getCameraDetails()

Возвращает объект с подробными сведениями о текущих настройках камеры.

Свойства возвращаемого объекта:

• yaw – показатель вращения вокруг вертикальной оси (в градусах).
• pitch – показатель вращения вокруг горизонтальной оси (в градусах).
• zoom – уровень масштабирования (в метрах).
• x – координата на оси X, вокруг которой вращается камера (в метрах).
• y – координата на оси Y, вокруг которой вращается камера (в метрах).
• z – координата на оси Z, вокруг которой вращается камера (в метрах).

Опытные пользователи могут ознакомиться с документацией на странице https://modelviewer.dev.

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

Для предварительного просмотра компонента "Просмотр 3D-моделей" можно использовать только 3D-редактор или браузер. Чтобы посмотреть компонент в браузере, нажмите кнопку Предпросмотр в правом верхнем углу.