К содержанию
DLДмитрий Лаврушин

HTML · CSS · JavaScript

Горизонтальная витрина с 3D-моделью

Карточки листаются жестом или стрелками. Модель «Печать 360°» загружается по нажатию и вращается в браузере.

Скачать пример Кейс проекта
Горизонтальная витрина с 3D-моделью
Экран проекта, на котором основан пример.

Образцы «Печать 360°»

  • Матовый и глянцевый образцы из проекта «Печать 360°»

    Матовая поверхность

    Скачать GLB

  • Изделия с глянцевой поверхностью из визуализаций проекта

    Глянцевая поверхность

    Скачать GLB

  • Шар с областью для круговой печати

    Круговая печать

    Скачать GLB

Что взято из проекта

В кейсе «Печать 360°» модель помогает увидеть область нанесения на ёлочном шаре. Пример использует опубликованные GLB, но собирает отдельную витрину для сравнения покрытий и области печати.

Как устроен блок

Карточки остаются HTML-списком. CSS scroll-snap-type выравнивает карточку после прокрутки; стрелки вызывают scrollTo. В примере нет перехвата вертикального колеса.

Модуль Three.js и GLB загружаются по кнопке. При смене карточки зритель освобождает WebGL-контекст, геометрию и текстуры. Если WebGL недоступен, постер и ссылка на GLB остаются на месте.

Что проверить перед использованием

Проверьте движение на телефоне, клавиши Home и End, поворот без мыши и отмену загрузки. Установите лимит размера GLB, сделайте постер и проверьте рендеринг материалов с вашим светом.

Ключевой фрагмент

  const go = index => {
    const card = cards[index];
    if (!card) return;
    track.scrollTo({
      left: card.offsetLeft - cards[0].offsetLeft,
      behavior: reduced.matches ? "instant" : "smooth",
    });
  };

Скачать JavaScript · Скачать CSS · Полный пример с HTML и ресурсами