Фоновая 3D-модель
Отображает glTF-модель на прозрачном WebGL-холсте с вращением, освещением и управлением мышью.
Что делает модификация
Отображает glTF-модель на прозрачном WebGL-холсте с вращением, освещением и управлением мышью.
Требования
Нужны WebGL, HTTPS и CORS для всех ресурсов модели. Используется Three.js r125; тяжёлые модели и текстуры повышают нагрузку.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| GLB или glTF со всеми ресурсами | Выберите значение в интерфейсе личного кабинета. |
| Масштаб модели | Параметр 0.1–10 |
| Положение X | Параметр -20–20 |
| Положение Y | Параметр -20–20 |
| Положение Z | Параметр -20–20 |
| Яркость света | Параметр 0–20 |
| Цвет света | Выберите значение в интерфейсе личного кабинета. |
Пошаговая установка
- Создайте место для моделиВ Zero Block добавьте HTML-элемент нужного размера. Первую часть с cont_3d вставьте в него; высота элемента должна быть больше нуля.
- Подготовьте модельЭкспортируйте GLB — он содержит модель и ресурсы в одном файле. Загрузите его в LF Drive и вставьте прямую ссылку. Для glTF нужно разместить также все bin и текстуры с сохранением относительных путей.
- Настройте сценуУкажите масштаб, положение и освещение в кабинете. Доступна встроенная демонстрационная модель; замените URL своим.
- Добавьте модульВторую часть с module-скриптом вставьте в T123 после Zero Block. Не вставляйте её в поле чистого CSS.
- Проверьте управлениеПосле публикации вращайте модель мышью или касанием и меняйте масштаб. Сервер модели должен разрешать CORS.
Нужны WebGL, HTTPS и CORS для всех ресурсов модели. Используется Three.js r125; тяжёлые модели и текстуры повышают нагрузку.
Частые вопросы
Где менять параметры?
После покупки откройте модификацию в личном кабинете, выберите параметры и получите готовый код.
Нужно ли редактировать код вручную?
Параметры задаются в кабинете. Для составных модификаций вставьте подписанные части в места, указанные в инструкции.
Что показывает живой пример?
Пример показывает механику на демонстрационных элементах. На вашем сайте используются подготовленные блоки Tilda.