Placera Proxy API

PLACERA SHOWROOM — EMBED REFERENCE FOR AI AGENTS
=================================================

The Placera Showroom is an interactive 3D product viewer built with React Three
Fiber. It is embedded in any web page via an 

  Transparent background (product floating over page):
    

  Multiple products:
    


POSTMESSAGE API — SEND COMMANDS TO THE SHOWROOM

  All messages follow the shape: { type: string, payload: object }
  Send with: iframeElement.contentWindow.postMessage({ type, payload }, '*')

  animateCamera
    Smoothly moves the camera to a new position.
    payload: { position: [x, y, z], target: [x, y, z], duration: seconds }
    Example:
      iframe.contentWindow.postMessage({
        type: 'animateCamera',
        payload: { position: [2, 1.5, 3], target: [0, 0.5, 0], duration: 1.5 }
      }, '*');

  rotateCamera
    Rotates the camera orbit relative to its current angle.
    payload: { deltaAzimuth: deg, deltaPolar: deg, maxRotateLeft?: deg, maxRotateRight?: deg, maxRotateUp?: deg, maxRotateDown?: deg }

  rotateModel
    Rotates a product around its Y axis.
    payload: { modelDeltaY: deg, modelProductIndex?: n } OR { modelDeltaY: deg, modelProductId?: id }

  toggleRoom
    Shows or hides the room environment.
    payload: { showRoom: boolean }

  changeStyle
    Switches room style preset.
    payload: { roomStyle: "style1" | "style2" }

  switchLight
    Turns the room light on or off.
    payload: { lightOn: boolean }

  togglePhysics
    Enables or disables physics simulation.
    payload: { physicsEnabled: boolean }

  toggleTransparentBackground
    Toggles transparent canvas.
    payload: { transparentBackground: boolean }

  setBackgroundColor
    Changes the background colour (visible when showRoom=false).
    payload: { backgroundColor: "#rrggbb" }

  setTimeOfDay
    Sets the time of day for scene lighting. Controls sun position, colour
    temperature, and intensity using realistic solar geometry.
    payload: { timeOfDay: number (0–24) }
    Example:
      iframe.contentWindow.postMessage({
        type: 'setTimeOfDay',
        payload: { timeOfDay: 8 }
      }, '*');

  setLatitude
    Sets the observer latitude used for solar position calculations.
    Latitude determines sun altitude and day length. Must be −90 to 90;
    values outside this range are silently ignored.
    payload: { latitude: number }
    Example:
      iframe.contentWindow.postMessage({
        type: 'setLatitude',
        payload: { latitude: 59 }  // Stockholm
      }, '*');

  setSeason
    Sets the season for solar declination.
    Values: "auto" (derive from current date) | "spring" | "summer" | "autumn" | "winter".
    payload: { season: string }
    Example:
      iframe.contentWindow.postMessage({
        type: 'setSeason',
        payload: { season: 'winter' }
      }, '*');

  setProductVisibility
    Shows or hides a specific product.
    payload: { visible: boolean, productIndex?: n } OR { visible: boolean, productId?: id }

  toggleToolTip
    Shows or hides a 3D-positioned tooltip.
    payload: { toolTip: { show: boolean, x: float, y: float, z: float, title: string, content: string, backgroundOpacity?: float, backgroundBlur?: number } }

  toggleAlt
    Toggles the alternative main product model.
    payload: { showAlt: boolean }

  ping
    Health check. The showroom replies with a heartbeat message.
    payload: (none)


EVENTS EMITTED BY THE SHOWROOM (listen via window.addEventListener('message', ...))

  PRODUCT_UPDATE
    Fired when the user moves or rotates a product.
    data: { id, name, position: [x,y,z], rotation: [x,y,z], show: boolean }

  ALL_PRODUCTS_UPDATE
    Fired after any product state change — full product list.
    data: [{ id, name, position: [x,y,z], rotation: [x,y,z], show: boolean }, ...]

  heartbeat
    Reply to a ping message.
    data: { status: 'alive', timestamp: number, performanceTime: number }

  initialState
    Emitted once on load with the initial product configuration.
    data: [{ id, name, position, rotation, show }, ...]


TYPICAL WORKFLOW FOR AI AGENTS
  1. Decide which IKEA product IDs to show.
  2. Build the /showroom URL with product0, product1, ... parameters.
  3. Embed as an iframe in the prototype page.
  4. Optionally wire up postMessage calls to buttons/interactions in the prototype.
  5. Listen for ALL_PRODUCTS_UPDATE events to read back the current scene state.