How to publish, share and embed a 3D model

How do I start?

The editor runs in the browser. There is nothing to install, and the people you send a link to need no account.

1. Open the editorapp.3dthing.in opens once you are signed in. No account yet? Create a free one, or ask for the demo account to look around first.
2. Open a modelChoose Open model (Ctrl+O), or drag a GLB, glTF, FBX or OBJ onto the viewport. A .gltf that comes with a .bin and textures opens when you drop them together, or drop the whole folder. Draco, KTX2 and meshopt compressed files open directly.
3. Keep it as a cloud projectNew project on the dashboard opens the editor in project mode. A strip above the editor shows the project name, whether it is saved, and a Save button. Changes are saved every minute while there are any, and straight away with Ctrl+S.
4. Or send it from your 3D programInstall the plugin for Blender, 3ds Max or SketchUp, sign in with the code it shows, and press Send. The project appears on your dashboard with the program it came from and a report of how its materials were converted. The 3ds Max and SketchUp plugins are in preview.
5. Publish a linkWhen it looks right, publish it and send the link. How publishing works is below.

Which keys does the editor use?

Single-key shortcuts can be changed in the Keys panel; Escape cancels a change. Copy, paste, undo and redo stay on their usual keys.

How does publishing a link work?

Publishing turns the project, as it is at that moment, into a numbered version with its own link. Later edits do not change it.

• Where: the Publish panel in the editor, or the project page.
• Plain link: https://app.3dthing.in/?share=<id>. Add &v=<n> to name a version.
• Pretty link: https://3dthing.in/s/<project-slug>-<projectId>/<version>, a page on this site with a preview picture for chat apps and the viewer filling the window.
• What is kept: camera, lighting, environment, shadows, background, grid, effects, shading, the starting view, the logo, the plan map and the automatic tour settings. What you see while editing is what the viewer shows.
• A smaller copy for the link: publishing compresses the copy the link serves, on your own machine, without moving a corner or renaming a part. The default keeps textures at full size; Ready for a phone and As small as it goes shrink them too.
• Older versions: an older link keeps working until you unpublish it, its end date passes, or it falls outside the number of versions the account keeps. A version somebody opened in the last 90 days is always kept.
• Unpublish from the project page removes the link and its stored model at once.
• Branding: links carry a small 3D Thing badge. Where the account includes it, a link can carry your own logo instead.

Each publish makes a new link. A link you already sent keeps showing the version it was made for, so send the new link when you want people to see the new version.

Who can open a link, and for how long?

Anyone who has the link, unless you say otherwise. Each link has an access level, and can have a password and an end date.

What happens to a password

The viewer sends the password once, in the body of one request, and gets back a pass that opens that one link for 15 minutes. After that the pass travels with each request in a header, not the password. The password never appears in an address, so it never ends up in a server log. Change the password and every pass made for the old one stops working at once.

What the people you send it to need

Nothing: no account and no install. When a visitor leaves a note or saves a design, their browser makes up a random id of its own, and that id is what makes those notes theirs. They see and can delete their own notes and designs, and nobody else's. Like the pass, it travels in a header, never in an address. The API reference has the exact requests.

How do I put a model on my own site?

An embed is the viewer without the editor around it. Paste the snippet from the project page, or write it yourself with the link's id:

<iframe
  src="https://app.3dthing.in/?share=SHARE_ID&embed=1"
  title="My product in 3D"
  width="100%" height="600"
  style="border:0;border-radius:12px"
  allow="fullscreen; xr-spatial-tracking"
  allowfullscreen loading="lazy">
</iframe>

A plain embed shows the model and sends nothing to your page. Measuring stays in the full viewer; it is not part of the embed. When the model has a configurator, the embed can tell your page what a visitor picks, which is the next section.

How does my page hear what visitors choose?

A configurator in an embed talks to the page around it with postMessage. Nothing that identifies the visitor is sent.

Every message carries source: '3dt', the protocol version (1 today) and the visitor's current choice: code (the value that reproduces it in a link), lines (one { group, choice, price } per option group), total, currency and url (a link that opens the configurator on that choice).

{
  source: '3dt', version: 1, type: 'change',
  code: 'a1.b3',
  lines: [{ group: 'Fabric', choice: 'Olive boucle', price: 120 }],
  total: 1570, currency: 'USD',
  url: 'https://app.3dthing.in/?share=SHARE_ID&config=a1.b3'
}

Messages go only to the page that framed the configurator, at the address the browser gives for it, and the configurator listens only to that page. On a browser that will not say which site framed it, your page can still ask for the current choice but cannot change it. To listen, paste this into your page and put your own logic where the comments are:

<script>
window.addEventListener('message', function (e) {
  if (e.origin !== 'https://app.3dthing.in') return;      // only the configurator
  var m = e.data;
  if (!m || m.source !== '3dt') return;
  if (m.type === 'change') {
    // m.lines is [{ group, choice, price }], m.total and m.currency say what it comes to, m.code reproduces it
  }
  if (m.type === 'quote') {
    // add m.lines and m.total to your cart or enquiry form, then tell the window it worked:
    e.source.postMessage({ source: '3dt', type: 'ack', ok: true, message: 'Added to your enquiry' }, e.origin);
  }
});
</script>

// From your page to the configurator in the frame
const frame = document.querySelector('iframe');
const to = 'https://app.3dthing.in';
frame.contentWindow.postMessage({ source: '3dt', type: 'getState' }, to);
frame.contentWindow.postMessage({ source: '3dt', type: 'setConfig', code: 'CODE_FROM_A_LINK' }, to);
frame.contentWindow.postMessage({ source: '3dt', type: 'reset' }, to);

Anything else, or a malformed message, is ignored.

How do scripts and plugins sign in?

With a personal access token. Create one on the API tokens page, pick what it may do and when it expires, and copy it: the full value is shown once and only a fingerprint of it is stored. The plugins make their own through the code you approve on this site, named after the program and the computer.

curl https://3dthing.in/api/bridge/me \
  -H "Authorization: Bearer 3dt_pat_XXXXXXXX"

Send Authorization: Bearer <token> on any /api/* request. Revoking a token on the account page stops it at once. Scopes, endpoints, uploads and webhooks are in the API reference.