Как сделать 3D-сайт: модель, загрузка и запасной экран

3D-сайт можно сделать без разработки собственной графической системы. Для карточки товара или портфолио достаточно готовой модели в формате GLB и компонента просмотра. Three.js нужен, когда объект должен участвовать в полноценной сцене, реагировать на прокрутку или взаимодействовать с другими элементами.

Выберите один из трёх уровней 3D

Под словом 3D часто смешивают разные задачи. Объёмная кнопка или наклон карточки делается обычным CSS. Один вращаемый товар удобно показывать через компонент <model-viewer>. Интерактивный мир с камерой, светом и несколькими объектами собирают на Three.js. Чем выше уровень, тем больше вес, проверок и рисков для слабых телефонов.

Правило выбора: берите самый простой вариант, который доказывает нужное свойство. Если надо показать форму упаковки, нужен один объект. Если посетителю важно пройти по виртуальному пространству, нужна сцена. Если объём только украшает заголовок, используйте CSS или короткое видео с неподвижной обложкой. Эффекты интерфейса отдельно разобраны в гайде по анимации сайта.

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

Составьте карту результата до сборки

Исходная точка: у вас есть обычная страница, право использовать модель и возможность менять HTML. Ожидаемый результат: объект появляется после загрузки, вращается по жесту, не перекрывает текст и заменяется постером при сбое. Обязательные шаги: подготовить модель, вставить просмотрщик, ограничить движение, добавить запасной вид и проверить устройства.

1. Запишите, что человек должен понять благодаря 3D: форму товара, устройство детали или идею проекта.
2. Выберите одну главную модель и удалите из первого прототипа декоративные объекты.
3. Подготовьте файл .glb, постер .webp и точное текстовое описание объекта.
4. Зарезервируйте место на странице, чтобы блоки не прыгали после загрузки.
5. Добавьте управление мышью, касанием и клавиатурой либо явные кнопки поворота.
6. Проверьте слабый телефон и медленную сеть, затем решите, оставлять ли интерактивность.

Этот список является воротами качества. Если нет постера, понятного текста или мобильной проверки, 3D-блок ещё не готов к публикации. Он может красиво работать на компьютере автора и показывать пустое место у посетителя.

Подготовьте модель для браузера

Three.js рекомендует использовать glTF, когда это возможно: формат создан для передачи модели во время выполнения, поддерживает геометрию, материалы, текстуры, анимации, свет и камеры. Варианты .gltf и .glb поддерживаются загрузчиком, это указано в официальном руководстве Three.js по загрузке моделей. Для сайта удобнее один бинарный файл .glb, потому что его проще разместить и проверить.

• Удалите невидимые объекты, лишние камеры и источники света из файла.
• Сократите число полигонов до уровня, при котором форма ещё не ломается на целевом размере.
• Уменьшите текстуры и не храните фон размером с исходник для печати.
• Проверьте масштаб и центр модели в отдельном просмотрщике до вставки на сайт.
• Сделайте статичный постер с тем же ракурсом, который человек увидит первым.
• Запишите источник модели и условия лицензии рядом с рабочими файлами проекта.

Размер модели оценивайте на целевом телефоне. Если вкладка перезапускается или 3D отодвигает главный текст, уменьшайте файл или показывайте постер.

По теме: Как сделать камеру на сайте: доступ, снимок и проверка

Вставьте одну модель через model-viewer

Компонент <model-viewer> подходит, когда нужно показать один объект с готовым управлением. В его официальной документации есть свойства для описания модели, управления камерой и постера. Сначала подключите библиотеку выбранным способом сборки, затем вставьте элемент в страницу.

<model-viewer
  src="/models/product.glb"
  poster="/images/product-poster.webp"
  alt="Тёмный настольный светильник с круглым основанием"
  camera-controls
  style="width:100%;height:min(70vh,640px);background:#f6f1ec"
>
  <img slot="poster" src="/images/product-poster.webp" alt="Тёмный настольный светильник с круглым основанием" style="width:100%;height:100%;object-fit:contain">
</model-viewer>

Атрибут alt описывает не эффект, а сам объект и важные детали. Постер показывается до готовности сцены и помогает сохранить смысл при медленной сети. Обычные фотографии и характеристики оставляйте рядом. Если блок добавляется в готовую страницу, полезен разбор вставки элементов на сайт.

Не включайте бесконечное автоматическое вращение по умолчанию. Сначала дайте человеку управление. Автоматическое движение допустимо как короткая подсказка, если оно останавливается при взаимодействии и не мешает читать соседний текст.

Когда нужен Three.js

Three.js выбирайте для сцены с несколькими объектами, своей камерой, светом, событиями и переходами. Библиотека отдельно подключает дополнительные части, включая GLTFLoader и OrbitControls, как показано в официальной инструкции по установке Three.js. Такой проект лучше собирать через пакетный менеджер и модульную систему, а не копировать случайные версии скриптов из разных примеров.

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
const controls = new OrbitControls(camera, renderer.domElement);

new GLTFLoader().load(
  '/models/product.glb',
  (gltf) => scene.add(gltf.scene),
  undefined,
  (error) => console.error(error),
);

Это только каркас. Для полной сцены ещё нужны размеры canvas, свет, цикл рендера, обработка ошибок и очистка ресурсов. Один товар проще показать через <model-viewer>.

По теме: Как сделать сайт на iPad в 2026: пошагово без компьютера

Ограничьте движение и нагрузку

Настройка prefers-reduced-motion сообщает, что человек предпочитает меньше необязательного движения. Справка MDN рекомендует удалять, уменьшать или заменять такие анимации. При значении reduce остановите автоматическое вращение и переходы камеры, оставив ручное управление и статичный постер.

@media (prefers-reduced-motion: reduce) {
  .model-shell {
    scroll-behavior: auto;
  }
  .model-hint {
    animation: none;
  }
}

Не рендерите сцену бесконечно, если ничего не меняется и блок ушёл за пределы экрана. Останавливайте цикл, когда вкладка скрыта, и освобождайте текстуры и геометрию при удалении сцены. MDN советует учитывать ограничения устройства и бюджет видеопамяти в рекомендациях по WebGL.

Проверьте 3D-сайт по измеримому чек-листу

Тестируйте опубликованный адрес: пути, заголовки сервера и кэш могут отличаться от локальной версии. Записывайте устройство и результат.

1. Перезагрузите страницу с пустым кэшем: сначала виден постер, затем модель без скачка разметки.
2. Откройте инструменты разработчика: запрос .glb возвращает 200, в консоли нет ошибок WebGL и CORS.
3. Поверните объект мышью и пальцем: страница при этом не теряет обычную вертикальную прокрутку.
4. Пройдите элементы клавишей Tab: главная кнопка и запасные ссылки достижимы.
5. Включите системное уменьшение движения: автоматическая камера и декоративная анимация прекращаются.
6. Отключите JavaScript или подмените путь к модели: постер, описание и основное действие остаются видимыми.
7. Откройте слабый телефон: вкладка не перезапускается, текст и форма не перекрыты сценой.

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

По теме: Как сделать базу данных сайта: схема, API и безопасный доступ

Диагностика частых сбоев

Вместо модели пустой блок. Проверьте путь, ответ 200, регистр имени и CORS. Затем откройте GLB в отдельном просмотрщике.

Модель чёрная или слишком тёмная. Проверьте материалы, свет и текстуры. При нестандартных материалах повторите экспорт в glTF.

Объект обрезан при повороте. Проверьте центр, масштаб, границы и параметры камеры. Не исправляйте это случайным увеличением сцены.

Телефон перезагружает вкладку. Уменьшите текстуры, объекты и разрешение. Если не помогает, запускайте 3D по кнопке или оставьте постер.

Прокрутка конфликтует с моделью. Не перехватывайте каждый жест. На телефоне включайте вращение отдельной кнопкой.

Когда 3D-сайт не подходит

Откажитесь от сцены, если объект объясняется двумя фотографиями, аудитория приходит со слабых телефонов или страница должна быстро открываться из рекламы. Важные детали дублируйте текстом и изображениями. Иногда достаточно сайта на весь экран.

Частые вопросы

Можно сделать 3D-сайт без программирования?

Можно встроить готовый просмотрщик или блок конструктора, если платформа принимает GLB и даёт запасной постер. Уникальная сцена с логикой обычно требует кода.

Какой формат модели выбрать для сайта?

Для передачи в браузер начинайте с GLB или glTF. Один GLB проще разместить, а отдельный glTF удобен, когда файлы и текстуры управляются раздельно.

Нужен ли Three.js для одного товара?

Обычно нет. Сначала попробуйте <model-viewer>. Three.js оправдан, если требуется собственная сцена, сложное взаимодействие или несколько связанных объектов.

Почему модель медленно открывается?

Чаще всего файл содержит лишнюю геометрию или слишком большие текстуры. Измерьте размер запроса, проверьте модель отдельно и уменьшайте самый тяжёлый ресурс первым.

Можно попросить ИИ собрать 3D-страницу?

Да, если дать модель, постер и точные критерии: обычный текст и кнопка остаются в HTML, управление не блокирует прокрутку, при сбое показывается постер, на мобильном проверяется память.