Разработка 360°-просмотра товара для интернет-магазина

Разработка 360°-просмотра товара для интернет-магазина

На одном из недавних проектов мы столкнулись с типичной проблемой: 72 кадра по 500 КБ каждый загружались асинхронно, но страница всё равно весила 36 МБ, LCP достигал 12 секунд, а пользователи покидали страницу, не дождавшись загрузки. После замены формата на WebP с прогрессивной загрузкой и внедрения приоритизации нечётных кадров LCP упал до 1.8 секунды, а конверсия выросла на 15%. Такой результат — прямое следствие грамотной стратегии загрузки, а не сложности кода.

360°-просмотр — это последовательность фотографий объекта (см. Продуктовая фотография), сделанных с равномерным шагом по кругу. Пользователь перетаскивает изображение влево-вправо и видит товар со всех сторон. Технически это не видео и не 3D — просто анимация через массив статических кадров, но эффект создаёт иллюзию интерактивного вращения. Ключевая задача — обеспечить плавное вращение без потери производительности.

Такой формат особенно эффективен для товаров, где важен внешний вид: одежда, обувь, электроника, ювелирные изделия. Однако реализация требует внимания к деталям: от съёмки до формата хранения и стратегии загрузки. Без этого пользовательский опыт ухудшается, а не улучшается. Получите консультацию по реализации 360°-просмотра в вашем магазине — мы поможем избежать типовых ошибок.

Технические требования к съёмке

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

Три основных подхода — их сравнение в таблице:

Видео (MP4) в 3–5 раз компактнее, чем отдельные WebP-файлы, но требует более сложного управления воспроизведением. Если гибкость важнее минимального веса, выбирайте отдельные файлы.

Как реализовать 360-просмотр на отдельных кадрах?

Наиболее распространённый подход — массив изображений с отрисовкой на Canvas. Код компонента:

class Product360Viewer { private frames: HTMLImageElement[] = []; private currentFrame = 0; private isDragging = false; private startX = 0; private startFrame = 0; constructor( private container: HTMLElement, private canvas: HTMLCanvasElement, private frameUrls: string[] ) { this.preloadFrames(); this.bindEvents(); } private preloadFrames() { // Загружаем первый кадр сразу, остальные в фоне const loadFrame = (index: number) => { const img = new Image(); img.src = this.frameUrls[index]; img.onload = () => { this.frames[index] = img; if (index === 0) this.render(0); if (index < this.frameUrls.length - 1) loadFrame(index + 1); }; }; loadFrame(0); } private render(frameIndex: number) { const ctx = this.canvas.getContext('2d')!; const img = this.frames[frameIndex]; if (!img) return; ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height); } private handleDrag(deltaX: number) { const sensitivity = 3; // пикселей на кадр const frameDelta = Math.round((this.startX - deltaX) / sensitivity); const totalFrames = this.frameUrls.length; this.currentFrame = ((this.startFrame + frameDelta) % totalFrames + totalFrames) % totalFrames; this.render(this.currentFrame); } } 

Почему прогрессивная загрузка критична для крупных каталогов?

7MB сразу при открытии страницы — неприемлемо. В одном проекте с каталогом на 500 товаров мы внедрили следующую стратегию:

1. Отображаем статичное изображение (первый кадр) — он уже в галерее товара
2. При наведении / при попадании в viewport (IntersectionObserver) — начинаем загрузку кадров
3. Показываем индикатор загрузки «Загрузка 360°: 45%»
4. При загрузке >50% кадров — активируем интерактивность
5. Продолжаем загружать остальные в фоне

Приоритет загрузки: нечётные кадры (0, 2, 4, 8, 16, 32...) — сначала грубая интерактивность, потом заполнение пропусков. Такой подход снижает объём начальной загрузки на 70% по сравнению с полной загрузкой всех кадров.

Как обрабатывать touch-события на мобильных устройствах?

private bindEvents() { // Mouse this.canvas.addEventListener('mousedown', e => this.startDrag(e.clientX)); window.addEventListener('mousemove', e => { if (this.isDragging) this.handleDrag(e.clientX); }); window.addEventListener('mouseup', () => this.isDragging = false); // Touch this.canvas.addEventListener('touchstart', e => { e.preventDefault(); // предотвращаем scroll страницы this.startDrag(e.touches[0].clientX); }, { passive: false }); this.canvas.addEventListener('touchmove', e => { e.preventDefault(); if (this.isDragging) this.handleDrag(e.touches[0].clientX); }, { passive: false }); this.canvas.addEventListener('touchend', () => this.isDragging = false); } 

Важно: passive: false и e.preventDefault() на touchmove — иначе браузер будет скроллить страницу вместо вращения товара.

Готовые библиотеки vs кастомная разработка

Если задача разовая и нет специфических требований, можно использовать готовые библиотеки: 360-image-viewer (vanilla JS, поддерживает touch), Pannellum (для панорам), Three.js (для сферических панорам). Для React есть react-360-image-viewer, но кастомизация ограничена.

Сравнение подходов:

Стоимость кастомной реализации варьируется от 150 000 до 500 000 ₽ в зависимости от объёма каталога и требований к производительности.

Автозапуск вращения

При первом попадании в viewport — автоматически прокрутить один оборот, потом остановиться. Это демонстрирует возможность и подсказывает пользователю, что изображение интерактивное.

autoSpin(rotations = 1, fps = 30) { const totalFrames = this.frameUrls.length * rotations; let frame = 0; const interval = setInterval(() => { this.currentFrame = (this.currentFrame + 1) % this.frameUrls.length; this.render(this.currentFrame); if (++frame >= totalFrames) clearInterval(interval); }, 1000 / fps); } 

Подсказки для пользователя

Интерактивность должна быть очевидна. Стандартные решения:

• Иконка «360°» поверх изображения в галерее (на тумбнейле)
• Overlay с подсказкой «Перетащите для вращения» — исчезает при первом взаимодействии
• Стрелочки влево-вправо по бокам (альтернативное управление для кнопочной навигации)
• Кнопки «Пауза/Воспроизвести» для автовращения

Интеграция с галереей

360°-просмотр — один из слотов галереи товара. Тумбнейл — специальная иконка, не фото. При выборе этого слота — запускается 360°-виджет вместо обычного изображения. При переходе на другой слот — виджет размонтируется и освобождает память (отменяем все незавершённые загрузки через AbortController).

Что входит в работу

• Интеграция готовой библиотеки: 3–5 рабочих дней. Включает настройку и встраивание в галерею.
• Кастомная реализация (Canvas API, прогрессивная загрузка, touch): 1.5–2.5 недели. Пишется полностью под ваш проект.
• Сопровождение: документация по съёмке, скрипты конвертации кадров в WebP, оптимизация.
• Гарантия: поддерживаем работоспособность на всех современных браузерах и устройствах.

Если вы планируете внедрить 360°-просмотр — свяжитесь с нами для оценки вашего каталога и подбора оптимального решения. Мы уже реализовали такие проекты для каталогов от 100 до 5000 товаров и знаем, как избежать типовых проблем. Получите консультацию по реализации 360°-просмотра в вашем магазине.