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