3D for the Web, AR & Products

3D content that people can spin, zoom and place in their room is a strong selling feature for product pages and brand sites. It is also a tempting way to wreck a site's speed. This lesson teaches you to put 3D on the web responsibly. It covers optimized files, sensible viewers, fallbacks, and the product viewers and AR experiences that clients are starting to ask for.

Choosing a way to show 3D

• Pre-rendered images or video, such as turntables: the smallest and fastest, and they work everywhere. This is often the right answer for a hero or an ad.
• A model viewer component: drop in a GLB with orbit controls and optional AR. Great for product pages with little code.
• A visual 3D web tool: design interactive scenes visually and embed them. Good for custom brand moments. Watch the speed.
• A 3D code library: full control for configurators, games and data visualizations. It needs the most development effort.

<!-- Load the model-viewer web component once (check its docs for the current version/URL) -->
<model-viewer
  src="/models/sneaker.glb"
  ios-src="/models/sneaker.usdz"
  alt="Red running shoe, three-quarter view"
  poster="/models/sneaker-poster.webp"
  camera-controls
  auto-rotate
  ar ar-modes="webxr scene-viewer quick-look"
  shadow-intensity="1"
  loading="lazy"
  style="width:100%;height:420px;background:transparent">
</model-viewer>

Optimizing 3D for the web

• Geometry: cut it down to the least that looks right at the sizes shown. Remove hidden faces and unused parts.
• Compression: use mesh compression, such as Draco or meshopt, for the geometry.
• Textures: size them to the need, often 1024 to 2048 pixels. Use efficient formats such as WebP or KTX2 and Basis. Pack roughness, metallic and AO into one image.
• Aim for a small download. For mobile pages, a few megabytes at most, and under one or two when you can.
• Lazy-load below the fold. Show a poster image at once, and load the model on interaction or when it becomes visible.
• Test on a mid-range phone with a throttled network. If it stutters there, it is not finished.

Fallbacks and accessibility

• Always give a static poster image and meaningful alt text. The page must work if WebGL is not available.
• Respect reduced-motion settings. No auto-rotation or camera moves if the user prefers less motion.
• Keep important information, such as price, specs and add to cart, in normal HTML outside the 3D canvas.
• Make controls usable with a keyboard. Do not trap scrolling on mobile when the model fills the screen.

Augmented reality for products

AR lets shoppers place a true-scale model in their room, or try an item on. For that to work, the model needs the correct real-world scale, a clean origin at its base, realistic materials and a small file. iOS uses USDZ. Android uses GLB through its viewers. Furniture, lamps, decor and appliances are natural fits. Always check that the AR size matches the real product. A wrong size defeats the point and increases returns.

Product configurators

A configurator lets visitors change colors, materials or options, and see the model update. Technically, it swaps materials or switches parts on a single optimized model. So plan the model with that in mind. Use separate meshes for parts that can change, consistent UVs and named materials. Scope it carefully. A simple color and material switcher is a manageable paid project. A full multi-option configurator tied to pricing and stock is a development project.

Turntables and renders

• A 360 degree turntable video from your 3D software is often lighter and more reliable than a live 3D viewer.
• Render stills from several angles for galleries and marketplaces, using consistent lighting.
• Deliver both: a live viewer for engaged shoppers, and rendered images for ads, social media and email.