Interactive 3D Product Viewer for E-commerce

The customer sees a product photo but cannot rotate it, zoom in, or assess the texture. The result is returns due to mismatched expectations, lost sales. 3D viewing solves this problem: the user independently explores the object by rotating, scaling, and enabling augmented reality. Studies show: conversion on product cards with 3D is up to 40% higher than without (per Shopify data for furniture — up to 65%).

Our experience in furniture, jewelry, footwear, and electronics niches confirms this statistic. We have delivered over 15 projects, each requiring an individual approach to modeling, lighting, and integration. Content production costs can be reduced by up to 70% through photogrammetry, and the ROI from implementing 3D viewing can exceed 300%. Contact us to discuss a 3D strategy for your catalog.

Which 3D model formats are best for the web?

GLB is the de facto standard for 3D on the web glTF 2.0 specification. Everything is packed into one file: geometry, materials, textures, animations. It supports PBR materials (metalness/roughness workflow), providing physically correct rendering.

Three.js — basic stack

Minimal 3D widget using Three.js:

import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, container.width / container.height, 0.1, 100); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.outputColorSpace = THREE.SRGBColorSpace; // OrbitControls — rotation, zoom, pan via mouse/touch const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 1; controls.maxDistance = 10; // DRACO decompression for compressed models const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('/draco/'); const loader = new GLTFLoader(); loader.setDRACOLoader(dracoLoader); loader.load('/models/product.glb', gltf => { scene.add(gltf.scene); fitCameraToObject(camera, controls, gltf.scene); }); // HDR environment for PBR lighting new RGBELoader().load('/env/studio.hdr', texture => { texture.mapping = THREE.EquirectangularReflectionMapping; scene.environment = texture; }); 

What does Draco compression give?

Draco is a 3D geometry compression algorithm from Google. Typical compression: geometry reduces by 5–10 times with no visible quality loss. An 8MB chair model becomes 800KB after Draco.

Conversion in the pipeline (offline, when an administrator uploads a model):

# gltf-pipeline by Khronos npx gltf-pipeline -i input.glb -o output.glb --draco.compressionLevel 7 # or via blender CLI blender --background --python export_with_draco.py 

The Draco decoder in the browser is a WASM module (~200KB). It must be placed on the server and the path specified in DRACOLoader.setDecoderPath().

<model-viewer> as a ready-made component

If deep customization is not needed, Google's <model-viewer> covers 90% of use cases. The open-source project model-viewer is actively maintained.

<model-viewer src="/models/chair.glb" ios-src="/models/chair.usdz" alt="Herman Miller office chair" camera-controls auto-rotate auto-rotate-delay="3000" rotation-per-second="30deg" shadow-intensity="1" exposure="0.8" environment-image="/env/neutral.hdr" ar ar-modes="webxr scene-viewer quick-look" loading="lazy" style="width: 100%; aspect-ratio: 1; background: #f5f5f5;" > <div slot="progress-bar"> <div class="progress-bar" style="..."></div> </div> <button slot="ar-button" class="ar-button"> View in your interior </button> </model-viewer> 

Built-in: OrbitControls, touch support, AR (WebXR + Quick Look), shadow, lazy loading, progress indicator.

Lighting and PBR materials

The quality of browser rendering is determined by lighting. Without a proper environment, even a good model looks flat.

An HDR environment map is a spherical HDR panorama of studio or neutral lighting. It creates correct reflections on metallic and glossy surfaces. Size: 2MB–8MB, loaded once and cached.

For products: a neutral studio HDRI (gray background, even light) — neutral.hdr from the model-viewer repository. For jewelry, an HDRI with pronounced highlights.

Animated materials: switching variants (color, material) — change material.color, material.roughness, material.metalnessMap. Without reloading the model:

const materials = model.querySelector('model-viewer').model.materials; const chairMaterial = materials.find(m => m.name === 'Fabric'); chairMaterial.pbrMetallicRoughness.setBaseColorFactor([0.8, 0.2, 0.2, 1]); // red 

How to optimize performance?

Model size: target GLB size for a product card is up to 2MB. Larger — the user waits, conversion drops. Optimization methods:

• Draco compression of geometry (5–10x)
• KTX2 / Basis Universal texture compression (3–5x, with GPU decoding)
• Retopology: remove hidden faces, simplify invisible parts
• Bake high-poly details into a normal map on a low-poly model

Lazy loading: Three.js/WebGL initializes only when the widget enters the viewport using IntersectionObserver. When the widget is off-screen, rendering is paused.

Pixel ratio: on mobile, limit devicePixelRatio to 1.5 max — saves GPU on Retina displays. Use <model-viewer> with built-in lazy loading if custom logic is not required.

Annotations and hotspots

Annotations are points on the 3D model with explanations. The user hovers/clicks — a tooltip appears with information about the detail.

In <model-viewer>, annotations use slots:

<model-viewer src="headphones.glb" camera-controls> <button slot="hotspot-ear-cup" data-position="-0.3 0.1 0.2" data-normal="-1 0 0" data-visibility-attribute="visible" > <div class="hotspot-label"> <strong>Ear pads</strong> Memory foam, 40mm </div> </button> </model-viewer> 

Coordinates data-position — world coordinates in the model's coordinate system. Determined in Blender or via built-in picking in Three.js.

Content preparation pipeline

Widget development and model preparation are parallel tasks. Typical pipeline:

1. 3D modeling (Blender, Cinema 4D) or photogrammetry (RealityCapture, Meshroom)
2. Optimization (Blender: retopology, LOD), Draco compression
3. PBR texturing (Substance Painter) + texture conversion to KTX2
4. QA in browser: test in model-viewer, test on mobile
5. Convert to USDZ for iOS AR (Reality Converter, online converters)
6. Upload to CDN with correct headers (Content-Type: model/gltf-binary)

Development timeline

3D model preparation (if not available): from 4 hours to 2 days per SKU. For large catalogs, photogrammetry reduces content production costs by 5–10 times compared to manual modeling.

What is included in our work package

• Analysis of existing models and recommendations for optimization
• Selection and setup of environment (HDR, lighting)
• Widget integration into your CMS or frontend
• Lazy loading and caching configuration
• Documentation on model management
• Training administrators on uploading and replacing models
• Warranty support for one month after delivery

Order 3D viewer development — write to us to evaluate your project. Get a consultation for your catalog. We will offer the optimal solution for your budget and assortment.