---
title: "3D buyer view"
description: "Offer an interactive venue view, cinematic seat navigation, and 360° sightlines with a reliable 2D fallback."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.seatlayer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 3D buyer view

The SeatPicker can move between a fast 2D map and an interactive 3D venue. Buyers can orbit the venue, inspect live seat state, fly to a seat, and open its 360° view.

The feature is progressive enhancement:

- enabled by default;
- shown only when the browser supports WebGL2;
- lazy-loaded only when the buyer enters 3D; and
- always paired with the standard 2D map.

## Basic setup

```js title="buyer-picker.js" {5,6}
const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  enable3D: true,
  seatView: true,
});

await picker.render();
```

Set `enable3D: false` when an embed must remain strictly 2D. Set `seatView: false` to hide 360° view-from-seat actions in both 2D and 3D.

## Control the view

The buyer can use the built-in **Map | 3D** switch. Your application can drive the same state:

```js title="venue-tour.js"
picker.setBuyerView("venue3d");
console.log(picker.getBuyerView()); // "venue3d"

// Enter 3D and move directly to a known seat.
picker.setBuyerView("venue3d", {
  flyToSeatId: "A-12",
});

picker.setBuyerView("map");
```

Calling `setBuyerView("venue3d", { flyToSeatId })` while already in 3D moves the existing camera without rebuilding the scene.

> **Use a seat id**
>
> `flyToSeatId` must identify a seat that exists in the loaded chart. Store the seat id from the SDK selection; do not derive it from display text in your UI.

## View-from-seat sources

SeatLayer resolves the closest available source:

1. a seat or row-level authored image;
2. a floor-level fallback;
3. a venue-wide fallback; or
4. a geometry-generated preview.

This lets a venue start with one 360° image and progressively add more precise sightlines later. Buyer UI distinguishes an authored image from a generated preview.

## Live state and theming

The 3D scene receives the same availability and selection changes as the 2D picker. Available, held, sold, not-for-sale, accessible, table, booth, section, zone, label, and floor information remains consistent while the buyer changes view.

Chart branding and host theme overrides are applied to the 3D experience as well as the picker chrome.

## Analytics

Use `onAnalytics` to forward the 3D journey into your product analytics:

```js title="3d-analytics.js"
const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  onAnalytics: (event, properties) => {
    analytics.capture(event, properties);
  },
});
```

Current events include:

- `3d_opened`;
- `3d_orbit_engaged`;
- `3d_seat_picked`;
- `3d_cinematic_played`, `3d_cinematic_skipped`, `3d_cinematic_cancelled`;
- `3d_panorama_opened`; and
- `3d_panorama_closed`.

The callback receives `{ surface: "buyer" }` with event-specific properties. A failing analytics sink does not break the picker.

## UX guidance

- Keep the built-in toggle discoverable; do not force every buyer into 3D.
- Use a direct flight for a “show my seat” or order-history experience.
- Keep controls outside the picker synchronized with `getBuyerView()`.
- Test low-power devices and browser WebGL restrictions.
- Do not make 3D a requirement for accessibility or checkout.
- Provide meaningful authored 360° images where obstructed views affect purchase decisions.

## Test matrix

- WebGL2 available and unavailable.
- Single and multi-floor venues.
- A seat with an authored image and one using the generated fallback.
- Live availability changing while 3D is open.
- Keyboard exit and return to the 2D selection.
- Mobile portrait and reduced container heights.
- Host theming with sufficient text and control contrast.

For the complete purchase flow, continue to the [checkout example](/examples/complete-checkout).

Source: https://docs.seatlayer.io/buyer-sdk/3d-view/index.mdx