Embed a 3D Viewer on Any Website

How does this work?

Think of it like embedding a YouTube video. You don't download YouTube. You paste a link, and the video plays everywhere, on any device, with nothing for you to manage.

GeometryViewer works the same way. You add two lines to your page. We handle the viewer, the 3D rendering, the AR, and every future update. When we make it better, your website gets the upgrade automatically. Zero reinstalling. Zero maintenance.

The two lines

<script type="module" src="https://geometryviewer.com/geometryviewer.js"></script>
<geometry-viewer src="https://yoursite.com/your-model.glb" ar controls></geometry-viewer>

That's it. The viewer fills whatever container you put it in. Style it with CSS like any block element.

From a physical object to AR: scan → mesh → share

You don't need CAD skills — or even a 3D file — to start. Photograph a real object with your phone and ShapeScan turns it into a true-scale STL right in the browser: place the object on a printed marker sheet, take one photo, download the mesh. No app, no uploads to third parties, accurate to about a millimeter.

Then drop that STL into GeometryViewer on your own page. Your visitors can orbit it, check real-world dimensions, and place it back into the physical world with AR — the full loop from object on your desk to object in someone else's room, entirely in the browser.

<!-- 1. Scan: photo → true-scale STL at shapescan.pt -->
<!-- 2. Mesh → Share: embed the result on your page -->
<geometry-viewer
  src="https://yoursite.com/scans/my-scan.stl"
  ar
  controls
  style="width:100%;height:420px;border-radius:12px;"></geometry-viewer>

<script type="module" src="https://geometryviewer.com/geometryviewer.js"></script>

ShapeScan runs its scanning client-side and hosts your STL wherever you choose — GeometryViewer renders straight from that URL. Nothing passes through our servers.

For your online shop

3D viewer embedded in an e-commerce product page

Let customers rotate your product, see every angle, and place it in their room with AR before they buy. Works on any website: WooCommerce, custom HTML, whatever you use.

<!-- Add this where you want the 3D viewer -->
<geometry-viewer
  src="https://yoursite.com/products/your-model.glb"
  ar
  controls
  style="width:100%;height:420px;border-radius:12px;"></geometry-viewer>

<!-- Load the component once, anywhere in the page -->
<script type="module" src="https://geometryviewer.com/geometryviewer.js"></script>

For Shopify stores

3D viewer replacing a flat product photo in a Shopify product grid

Paste this into your product page theme. In your Shopify admin go to Online Store → Themes → Edit code, then open sections/main-product.liquid (or product.liquid):

<script type="module" src="https://geometryviewer.com/geometryviewer.js"></script>

<geometry-viewer
  src="{{ product.metafields.custom.model_url }}"
  ar
  controls
  style="width:100%;height:400px;border-radius:12px;"></geometry-viewer>

Store your .glb file URL in a product metafield called model_url (Settings → Custom data → Products). The viewer only renders when a metafield value is present, so existing products without a 3D model are unaffected.

For Etsy sellers

Etsy listing page with an interactive 3D viewer as the hero

Etsy doesn't allow custom code in listings, but you can still share an interactive 3D preview. Upload your model somewhere (Google Drive, Dropbox, any URL that gives a direct download link) and share this link with your customers:

https://geometryviewer.com/?url=YOUR_MODEL_URL

Paste it in your listing description or send it to customers directly. They click the link and see your product in full 3D. No app download, no account, nothing to install.

# Example: replace with your actual model link https://geometryviewer.com/?url=https://drive.google.com/uc?id=YOUR_FILE_ID

For Google Drive: share the file publicly, then change the URL from drive.google.com/file/d/ID/view to drive.google.com/uc?id=ID to get a direct download link.

For your portfolio

Minimal dark portfolio page with a large interactive 3D viewer centered

Show your 3D work the way it deserves: interactive, rotatable, in AR. No flat screenshot. No video loop. The real thing.

<!-- Anywhere in your portfolio page -->
<script type="module" src="https://geometryviewer.com/geometryviewer.js"></script>

<geometry-viewer
  src="/models/my-design.glb"
  ar
  controls
  style="width:100%;height:560px;border-radius:16px;"></geometry-viewer>

Email your clients a 3D presentation

Email compose window with a beautiful 3D model presentation email preview

Drop your model into GeometryViewer, hit Share, then Email, and preview the email your client will receive: a dark-theme presentation with your model front and center. When you're happy with it, enter their email and send. They get a link that opens the model in full 3D and AR right away. No attachments to download, no software to install.

Coming soon. Email presentation is in active development. Sign up to be notified when it launches: contact@geometryviewer.com

In the meantime, the share-by-link section below gives you a URL you can paste into any email manually. The client experience is identical. You just compose the email yourself.

Share on social media

Any model loaded from a public URL is shareable right away. Generate a viewer link and post it to X, LinkedIn, or WhatsApp. Followers open it in their browser, no install needed. On mobile, they can place the model in AR in their room.

Use the share buttons below to post the GeometryViewer demo model, or replace the URL with any public model link:

Share buttons above use the Benchy demo model. To share your own model, load it on the home page, then use the share-by-link pattern below with its URL.

Technical Reference

Everything the element supports, for developers who want the full picture.

Attributes

Attribute	Value	Description
src	URL string	Model URL to load. Supports .stl, .obj, .gltf, .glb, .3mf. Format is auto-detected from file content.
ar	boolean	Show the AR button. On iOS uses Apple Quick Look (no install). On Android uses WebXR with real-world lighting.
controls	boolean	Show the built-in toolbar: solid/wireframe toggle, camera reset, fullscreen.

JavaScript API

const viewer = document.querySelector('geometry-viewer');

// Load a model from an ArrayBuffer (e.g. from a file picker or fetch)
viewer.loadBuffer(arrayBuffer, 'glb'); // format: 'auto'|'stl'|'obj'|'glb'|'gltf'|'3mf'

// Toggle wireframe mode
viewer.setWireframe(true);

// Reset camera to default position
viewer.resetCamera();

// Force a canvas resize (call after container size change)
viewer.resize();

Methods

Method	Description
loadBuffer(buffer, format)	Load from ArrayBuffer. format: `'stl'\|'obj'\|'glb'\|'gltf'\|'3mf'\|'auto'`
setWireframe(bool)	Toggle wireframe rendering mode.
resetCamera()	Reset camera to the default orbit position.
resize()	Call after the container element changes size.

Events

Event	Description
gv-loaded	Fired when the model has loaded and is visible. Bubbles.
gv-error	Fired on load failure. `event.detail` contains the Error object. Bubbles.

viewer.addEventListener('gv-loaded', () => {
  console.log('Model ready');
});
viewer.addEventListener('gv-error', (e) => {
  console.error('Load failed:', e.detail);
});