Разработка 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, но кастомизация ограничена.

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

Стоимость кастомной реализации варьируется от $1.5k–5k в зависимости от объёма каталога и требований к производительности.

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

При первом попадании в 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°-просмотра в вашем магазине.