A photo shows one side of a product. A 3D viewer lets the shopper turn it over, zoom into the details and, on a phone, place it in their own room at real size. The technology for this is now standard and runs in the browser — no app required.
The two formats you need
- GLB — the binary form of glTF 2.0, the standard format for 3D on the web. It drives web viewers and AR on Android through Google’s Scene Viewer.
- USDZ — Apple’s format for AR Quick Look, the built-in AR viewer on iPhone and iPad.
Most stores ship both from the same master model, so every visitor gets AR on their own device.
How it appears on a product page
- An embedded viewer next to the product photos, where the shopper can rotate and zoom. Google’s open-source
<model-viewer>component or a three.js viewer are common choices. - A “View in your room” button that opens the phone’s AR viewer with the model at real size.
- Hotspots — small annotations pinned to features such as a port, a clasp or a material.
Preparing a model for the store
- Real-world scale is critical for AR. One unit must equal one metre, or a sofa will appear the size of a toy.
- Put the origin at the base, so the product sits on the floor or the table instead of floating.
- Keep it light. Reduce geometry, bake detail into normal maps, and compress geometry (Draco or meshopt) and textures (KTX 2.0).
- Use metal/roughness PBR materials, which both formats understand.
Our Web 3D export tutorial covers these steps in detail.
Keep the page fast
- Show a poster image and load the viewer only when the shopper reaches it.
- Keep a normal product image as the main picture for search engines and social previews.
- Test on a mid-range phone, not only on a desktop.
Turn your product into web and AR files: a web & AR-ready model (GLB + USDZ) starts at 3,000,000 Toman, an interactive viewer for your site at 7,500,000 Toman, and a 3D configurator from 15,000,000 Toman. Try a model in the ZIBADIS 3D viewer.
