Show a 3D Model on Your Website and in AR

The file you need

Use model.glb from your OBJify download. GLB is the web's standard 3D format: mesh, texture and material in one file that every browser-based viewer understands.

Models are around 55,000–60,000 triangles with a single colour texture (no normal or roughness maps). Files are deleted from our servers after an hour, so keep the ZIP.

1. Set the real size (important for AR)

In the browser, size doesn't matter. In AR it does: the model appears in the room at its true size in metres. Because a single photo doesn't reveal how big something is, the GLB comes at about 1 m on its longest side, so a coffee mug would show up as big as a chair.

Fix it once in Blender: import the GLB, type the real height into Dimensions, apply the scale and export glTF 2.0 again. The Blender guide walks through it.

2. Add it to your page

Upload the GLB to your site, then paste this where the model should appear. It uses model-viewer, a free, open-source web component made by Google.

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

<model-viewer
  src="/models/product.glb"
  poster="/models/product.webp"
  alt="Describe the object for screen readers"
  camera-controls
  auto-rotate
  ar
  shadow-intensity="1"
  style="width: 100%; height: 480px;">
</model-viewer>

• camera-controls lets visitors rotate and zoom.
• auto-rotate turns the model slowly until someone touches it.
• poster shows an image while the model loads. A screenshot of the model works well.
• alt describes the model for screen readers and search engines.

3. Turn on "view in your room"

The ar attribute in the snippet above is all it takes. On a supported phone, model-viewer shows an AR button:

• Android: opens the GLB in AR through Google's Scene Viewer or WebXR.
• iPhone and iPad: model-viewer converts the GLB on the fly for Apple's AR Quick Look, so you don't need a separate USDZ file.
• Desktop: the button stays hidden and the model simply rotates on the page.

Test on a real phone after uploading, and check that the size looks right next to real furniture.

4. Make it load faster

GLB files from OBJify are typically a few megabytes. That's fine for a product page, but you can make them much smaller with the free glTF Transform tool (requires Node.js):

npx @gltf-transform/cli optimize model.glb product.glb --compress draco --texture-compress webp

model-viewer decodes Draco-compressed files without extra setup. Look at the result before publishing: very strong compression can soften fine details.

Shopify, WordPress and other platforms

• Shopify: upload the GLB as product media, next to your photos. Shopify shows it in its 3D viewer on the product page.
• WordPress, Webflow, Squarespace and others: paste the snippet into a custom HTML or code block, with the GLB uploaded to your media library or file storage.
• Your own server: serve .glb files with the content type model/gltf-binary. If the file is on another domain or CDN, that server must allow cross-origin requests (CORS).

Tips for product pages

• Photograph the product from slightly above, in soft even light. The photo tips apply to web models too.
• Check the back of the model in OBJify's free 360° preview before you pay. It is reconstructed from a single photo, so it's the part most worth a look.
• Keep the 3D viewer next to, not instead of, your photos: shoppers still want the real pictures.