Розробка 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°-перегляду у вашому магазині.