🔄 Live Angle Thumbnails

A shopper picks a fabric, then a leg finish, then a different fabric again. Your product gallery is still showing the photography from the original catalogue shot — the thumbnails no longer match what's on screen.

Live angle thumbnails fix that. Tell the configurator which angles you want, and every time the shopper's configuration settles it sends your page a fresh set of small renders of exactly what they've built, from those angles. Drop them into your gallery strip, and clicking one can spin the live 3D viewer round to match.

They're rendered in the shopper's browser from the live scene, so they always match — same materials, same lighting, same tone mapping and shadows as the big viewer. Backgrounds are transparent, so they sit on whatever your page uses.

Quick start

Ask for some angles on the configurator URL:

https://configurator.orbital.vision/{apiKey}/{productId}?cutoutAngles=0,-45,-135

Then listen for them on your page:

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'CUTOUT_THUMBNAILS') return;
 
  const { bitmaps, yaws } = event.data;
  // bitmaps[i] is the render for angle yaws[i]
});

That's the whole feature. Nothing happens unless you pass cutoutAngles — no extra rendering, no messages.

Using the ov25-ui package? productLink accepts a query string and merges it into the iframe URL, and the message still arrives on your page's window:

injectConfigurator({
  apiKey: () => 'your-api-key',
  productLink: () => '92?cutoutAngles=0,-45,-135',
  // ...the rest of your config
});

Choosing angles

cutoutAngles is a comma-separated list of absolute yaw angles in degrees:

• 0 faces the front of the product.
• Negative walks left around it, positive walks right.
• 180 (or -180) is the back.

So 0,-45,-135 gives you a front shot, a left three-quarter, and a left-back three-quarter.

They're absolute, so you don't need to know anything about how a particular product's camera was set up — 0 is the front of a footstool and the front of a corner sofa alike. Everything else about the shot (height, lens, and how tightly the product is framed) comes from the product's own default camera, so the thumbnails look like the main viewer rather than a generic render.

Each angle is one extra render, repeated every time the configuration changes, so keep the list short — three or four is a comfortable number. Ask for the smallest cutoutSize that still looks sharp at the size you display it; the default 200 is deliberately tiny because the tiles are usually 100px or so on screen.

Receiving the thumbnails

Every time the shopper's configuration settles, the configurator sends the complete current set — not just what changed. Replace whatever you were holding and you're always in sync; there's no patching or bookkeeping to do.

The message is deliberately not JSON — the images come across as ImageBitmap objects, which transfer without being copied or base64-encoded:

ImageBitmap can be drawn straight to a <canvas>. If you'd rather have something you can put in an <img> tag, convert them as they arrive:

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'CUTOUT_THUMBNAILS') return;
 
  const { bitmaps, yaws } = event.data;
 
  const tiles = bitmaps.map((bitmap, i) => {
    const canvas = document.createElement('canvas');
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    canvas.getContext('2d').drawImage(bitmap, 0, 0);
    bitmap.close(); // release it once you've copied the pixels out
 
    return { url: canvas.toDataURL('image/png'), angle: yaws[i] };
  });
 
  renderMyThumbnailStrip(tiles); // your code
});

Clicking a thumbnail to spin the viewer

Send SELECT_CUTOUT_ANGLE back to the iframe to swing the live 3D viewer round to one of the angles you were sent:

iframe.contentWindow.postMessage({
  type: 'SELECT_CUTOUT_ANGLE',
  payload: JSON.stringify({ yawDeg: -45 }),
}, '*');

The camera moves instantly and then holds that angle — orbiting is disabled so the view keeps matching the thumbnail the shopper clicked. To hand control back, send null:

iframe.contentWindow.postMessage({
  type: 'SELECT_CUTOUT_ANGLE',
  payload: JSON.stringify({ yawDeg: null }),
}, '*');

That restores free orbit and returns the camera to wherever the shopper had left it before the first click — so a "360°" tile alongside your thumbnails gives them a natural way back.

Recipes

Behaviour notes

• Off by default. With no cutoutAngles parameter the configurator behaves exactly as it always has — nothing is rendered and no messages are sent. An empty or invalid value is treated the same way.
• The first set arrives shortly after the shopper's first configuration change rather than on initial page load, so keep your existing imagery in place until thumbnails turn up.
• Renders are captured off-screen and never disturb the shopper's view — the live viewer doesn't flicker or move while a set is being produced.
• Rapid changes are coalesced: click through five fabrics quickly and you'll get one set for the configuration you land on, not five.
• Backgrounds are fully transparent, and the product is framed the same way in every angle.
• Available on the standard product configurator. The bed, dining, and Snap2 modular configurators have their own embeds and don't support this yet.