The fastest way to put an interactive 3D model on your website is to export it as a GLB file and drop it into Google's free model-viewer web component: about ten lines of HTML gives you rotate, zoom and AR on phones. If you sell on Shopify, you can upload the GLB straight to a product. For anything more custom (scroll-driven cameras, material swaps, branded UI) you build the viewer in Three.js.
Here are the four options, from easiest to most custom.
4 ways to embed a 3D model on a website
| Option | Effort | Control | AR | Best for |
|---|---|---|---|---|
| model-viewer | Low | Medium | Yes (Android, iOS) | Most product pages and brand sites |
| Sketchfab embed | Lowest | Low | Via Sketchfab | Portfolios, museums, quick showcases |
| Shopify native 3D | Low | Low | Yes | Shopify product pages |
| Custom Three.js | High | Full | If you build it | Heroes, configurators, scroll stories |
1. model-viewer
An open-source web component from Google. You load one script, then use a <model-viewer> tag like an <img>. It handles camera controls, lighting, a poster image and AR handoff. It's our default recommendation for a 3D model viewer website setup that doesn't need custom behavior.
2. Sketchfab embed
Upload to Sketchfab, click Embed, paste the iframe. The trade-off: you live inside their player and their loading screen, on their platform.
3. Shopify native 3D
Shopify accepts GLB files as product media and shows them in the theme's viewer. Its partner checklist asks for a total file size of about 4 MB and textures no larger than 2048 × 2048 px, built at real-world scale. We cover the theme side in our Shopify 3D model viewer guide.
4. Custom Three.js
When the model is part of the story rather than a widget in a box: it reacts to scroll, changes material on click, or lives in a designed scene. That's a build, not an embed. Our 3D product visualization guide covers when that's worth it.
File formats: glTF, GLB and USDZ
- glTF / GLB. glTF is the open standard for 3D on the web, maintained by Khronos. GLB is the single-file binary version, with mesh, materials and textures packed together. Use GLB.
- USDZ. Apple's format for AR Quick Look on iPhone and iPad. With model-viewer you can supply one via
ios-src, or leave it out and model-viewer will auto-generate the USDZ when the visitor taps AR on iOS. - FBX, OBJ, STEP, SolidWorks. Not web formats. Convert to GLB first. CAD exports usually need the mesh rebuilt lighter before they're usable.
Step by step: show a 3D model on a website with model-viewer
- Export a GLB from Blender or your 3D tool, at real-world scale (meters).
- Compress it. Run it through glTF-Transform or a similar tool to shrink geometry and textures.
- Render a poster image of the default view. It shows instantly while the model loads.
- Add the code:
<script type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer
src="/models/lounge-chair.glb"
poster="/models/lounge-chair-poster.webp"
alt="Oak lounge chair with bone wool cushion, rotatable 3D view"
camera-controls
touch-action="pan-y"
auto-rotate
ar
ar-modes="webxr scene-viewer quick-look"
loading="lazy"
style="width:100%; aspect-ratio:1/1;">
</model-viewer>
- Test on two real phones, one iPhone and one mid-range Android. Check that page scroll still works over the model (
touch-action="pan-y"handles that) and that the AR button appears.
Check modelviewer.dev for the current version number before you ship; pin it rather than loading "latest". If your developer wants more depth, Cloud Four's guide to embedding 3D models on the web is a solid technical read.
Size targets that keep it fast
The number one mistake is a 40 MB model straight out of a CAD tool. Shopify's ~4 MB ceiling is a reasonable outer limit. Our own working target for a hero model is tighter.
In short: we aim for a compressed GLB of 2 MB or less for the hero model, 1K–2K textures in KTX2, and the model loading after the rest of the page has painted. The full budget and the compression steps are in our 3D website performance guide.
AR: what works where
model-viewer supports three AR modes: webxr, scene-viewer (Android) and quick-look (iOS). The WebXR route needs browser APIs that model-viewer notes are available in Chrome, Edge and Samsung Internet but not Safari or Firefox, which is why listing all three modes matters: each phone falls through to what it supports.
Common mistakes
- Wrong scale. A chair that appears 3 cm tall in AR kills trust.
- No poster. Visitors stare at an empty box.
- Scroll trap. A full-width viewer can swallow the swipe on phones.
- Missing alt text. The model needs a description like any image.
- Too many viewers per page. Each is a separate download and GPU context.
