How to Put a 3D Model on Your Website (and Make It Viewable in AR)

To embed a rotatable 3D model on a website, host a GLB file and drop in Google's free `<model-viewer>` web component: one `<script>` tag and a `<model-viewer src="model.glb">` element. Add the `ar` attribute and supported phones get a "View in your space" button — Android uses the GLB directly, and iOS Quick Look works too because model-viewer auto-generates the USDZ it needs from your GLB when the visitor taps the AR button.

Get a web-ready GLB file

For the web you want GLB, not STL or OBJ. GLB is a single self-contained binary file that packs the mesh, materials, and textures together — nothing to wire up, one file to host. STL has no color or texture (it's a print format), and OBJ ships textures as loose sidecar files that are easy to lose and a pain to host.

If you already have a model, export it as GLB from your 3D tool. If you're starting from a product photo or a text description, HIBR 3D outputs GLB directly — including an Ultra 4K tier with PBR (physically based rendering) textures, which is what makes a model look polished under a viewer's lighting instead of flat. PBR is exactly what `<model-viewer>` renders, so a higher-quality export translates straight to a better-looking embed. Whatever the source, the goal is the same: one GLB with its textures baked in.

Host the file somewhere public

`<model-viewer>` loads your model over HTTPS, so the GLB needs a public URL. Three common options: drop it next to your page on the same host (e.g. `/models/chair.glb`), upload it to object storage like an S3/R2/Cloudflare bucket, or put it on any static host (Netlify, GitHub Pages, Vercel). A CDN-backed host is worth it — 3D files are bigger than images and a CDN cuts load time for distant visitors.

Two gotchas that cause a blank viewer. First, the server must send the right MIME type; if your GLB won't load, configure `model/gltf-binary` for `.glb`. Second, if the model lives on a different domain than your page, that host must send permissive CORS headers (`Access-Control-Allow-Origin`). Same-origin hosting sidesteps the CORS issue entirely, so if you're not sure, start there.

Embed it with two lines of HTML

Load the component once in your page, then use the `<model-viewer>` element like any other tag. The script is a standard ES module from Google's CDN:

```html <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js"></script>

<model-viewer src="/models/chair.glb" alt="A walnut dining chair" camera-controls auto-rotate shadow-intensity="1" poster="/models/chair-poster.webp" style="width: 100%; height: 480px;"> </model-viewer> ```

What each part does: `camera-controls` lets the visitor drag to orbit and pinch to zoom; `auto-rotate` spins it slowly until they grab it; `shadow-intensity="1"` drops a contact shadow so it sits on the page instead of floating; `poster` shows a still image while the GLB downloads (use a real screenshot so there's no empty box); and `alt` is required for accessibility. You must set a height — the element collapses to nothing without one. That's a working viewer. (`unpkg.com/@google/model-viewer/dist/model-viewer.min.js` is an equivalent CDN if you prefer.)

Turn on AR for phones

Add three attributes and supported phones get an AR button that drops the model into the real world through the camera:

```html <model-viewer src="/models/chair.glb" ar ar-modes="webxr scene-viewer quick-look" ar-scale="fixed" camera-controls alt="A walnut dining chair"> </model-viewer> ```

`ar-modes` is a priority list and the component picks the first one the device supports. On Android it uses WebXR or Google's Scene Viewer with your GLB. On iPhone it uses Apple's Quick Look — and here's the part most guides get wrong: you do not have to make a USDZ yourself for it to work. When no `ios-src` is set, model-viewer converts your GLB to USDZ on the fly the moment the visitor taps the AR button, so Quick Look gets the format it needs. AR only fires on real phones (iOS Safari, recent Android Chrome) — on desktop the button simply won't appear, which is expected. Set `ar-scale="fixed"` for products like furniture or decor where true-to-life size matters; leave it off (`ar-scale="auto"` is the default) if you want the viewer to be able to resize the model.

When to supply your own USDZ (and when not to bother)

The auto-generated USDZ is good enough for most static product models, so start there and test on an actual iPhone before doing more work. But the on-the-fly conversion has real limits: it doesn't carry animation, and complex materials or large textures can lose fidelity or balloon the file, which makes Quick Look slow to open. For those cases you supply a hand-made file with the `ios-src` attribute (`ios-src="/models/chair.usdz"`), and iOS uses that instead of converting.

The catch worth being honest about: HIBR 3D exports GLB, not USDZ, so making that file is a step you do in your own tool — Reality Converter on macOS, or a `usdzconvert`/`gltf-to-usdz` command-line converter on any OS. Feed it the same GLB you're already hosting. If you don't have a Mac or a converter handy, skip it: the GLB alone still gives every iPhone visitor working AR via auto-conversion. One more knob if the auto USDZ feels heavy — `ar-usdz-max-texture-size="1024"` caps the texture resolution Apple's viewer downloads, trading a little sharpness for a much faster AR launch.

Keep it lightweight so it actually loads

3D files are heavier than images, and a slow viewer gets abandoned. Aim for a GLB under about 5 MB for a typical product (smaller is better on mobile data), and keep the on-screen geometry reasonable — tens of thousands of triangles, not millions. A model meant to spin on a web page does not need print-grade density.

Three levers that move the needle most: compress the geometry with Draco or meshopt (often cuts file size by more than half with no visible change), resize textures to what the screen actually shows (2K is plenty for web; 4K only if visitors zoom in close), and use the `poster` image plus `reveal="interaction"` or `loading="lazy"` so the heavy GLB only downloads when the viewer scrolls into view or the visitor taps. Test the final page on a mid-range phone over cellular, not just your laptop on Wi-Fi — that's the experience most of your audience actually gets.

FAQ

More guides