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

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:

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.

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:

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.