Embedding the 3D Viewer

Quick Start

The simplest embed points at a hosted model file. Paste this into any HTML page and swap in your own file URL:

<iframe
  src="https://www.innerscene.com/tools/3d-viewer?url=https://example.com/model.glb&embedded=1"
  width="800" height="600" frameborder="0" allowfullscreen>
</iframe>

The viewer auto-detects the format from the file content, so any of the supported formats (SKP, DWG, STEP, IFC, Rhino, glTF, OBJ, STL, and more) works with the same snippet. The fastest way to generate a snippet is the Embed button in the viewer toolbar, which fills in your current view automatically.

Compressed vs Readable Links

The Embed dialog offers two ways to encode the same view. Both load identically; they differ only in length and legibility.

Source Parameters

Pick one of these to tell the viewer which model to load. Use url for the readable form; d and share are produced by the Share and Embed dialogs.

Display Parameters

View-State Parameters

These set the starting view. Add them to a ?url= embed (readable form), or let the Embed dialog capture them for you. Defaults are skipped, so a plain embed simply opens in the default 3D solid view.

Loading a Model Without a URL

?url= needs an address the viewer can fetch. Three common cases have no such address: the host page already holds the bytes in memory, the file sits behind authentication the iframe cannot replay, or the file is on the visitor’s own machine. There are two ways to load a model in those situations.

1. Inline with a data: URI

Small models can travel inside the URL itself. The viewer decodes them in the page — nothing is fetched and nothing is uploaded.

const dataUri = 'data:model/stl;base64,' + base64Bytes;
iframe.src = 'https://www.innerscene.com/tools/3d-viewer'
  + '?url=' + encodeURIComponent(dataUri)
  + '&embedded=1';

encodeURIComponent is required. Without it the + characters in a base64 body arrive as spaces and the payload will not decode. Browsers cap URL length, so treat a few megabytes as the practical ceiling — past that, use postMessage.

2. postMessage (any size)

Add ?pm=1 and the viewer will accept the file from the page that embeds it. Bytes are transferred in memory, so there is no size ceiling beyond available RAM and no network round trip. Wait for the viewer-ready handshake before posting — the frame ignores anything that arrives before its listener mounts.

const iframe = document.querySelector('iframe');

window.addEventListener('message', async (e) => {
  if (e.source !== iframe.contentWindow) return;
  if (e.data?.source !== 'innerscene-3d-viewer') return;

  if (e.data.type === 'viewer-ready') {
    const buffer = await file.arrayBuffer();
    iframe.contentWindow.postMessage(
      { type: 'load-model', name: 'part.stl', data: buffer },
      'https://www.innerscene.com',
      [buffer],            // optional: transfer instead of copy
    );
  }

  if (e.data.type === 'load-result') {
    console.log(e.data.ok ? 'loaded ' + e.data.name : 'failed: ' + e.data.error);
  }
});

Format detection is content-based, so name is only a hint — a model loads correctly even with the wrong extension or none at all. Only the immediate parent frame may post; messages from other frames are ignored.

A Worked Example

This embed opens a model in a top-down wireframe view, over a grid ground, with two layers hidden and the toolbar off:

<iframe
  src="https://www.innerscene.com/tools/3d-viewer?url=https://example.com/part.step&v=top&s=wireframe&gm=grid&l=Fasteners%7CWelds&embedded=1"
  width="800" height="600" frameborder="0" allowfullscreen>
</iframe>

Reading the query string: v=top (top view), s=wireframe (wireframe), gm=grid (grid ground), l=Fasteners|Welds (those two layers hidden), embedded=1 (no toolbar).

Responsive Embeds

An iframe has no intrinsic aspect ratio, so to make the viewer fill its container set width="100%" and give the iframe a fixed or aspect-ratio height with CSS:

<div style="position: relative; width: 100%; aspect-ratio: 4 / 3;">
  <iframe
    src="https://www.innerscene.com/tools/3d-viewer?url=https://example.com/model.glb&embedded=1"
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
    allowfullscreen>
  </iframe>
</div>

The Embed dialog’s “Responsive width” checkbox emits the width="100%" form for you.