3D Mode

Overview

In 3D Mode, the floorplan is rendered as an interactive, three-dimensional view, providing an elevated perspective of the space. Users can dynamically adjust the viewing angle by dragging, offering a more immersive experience for visualising layouts.

Key Features

• Elevated 3D View: Displays the floorplan from an elevated angle, giving a realistic sense of depth.

• Interactive Angle Adjustment: Users can drag to rotate and change the viewing angle.

• Space Allocations: Displays none, one, or multiple space allocations (e.g., desks, private offices, meeting rooms) based on the provided spaces array.

• No Layer-Specific Focus: Shows the entire location without focusing on a specific layer.

Configuration

• Trigger: Activated when layer_id is not provided in the SDK configuration.

• Required Parameters:

  • key: ID of the container element.

  • access_token: Valid JWT for authentication.

  • location_id: Unique identifier for the location.

• Optional Parameters:

  • zone_id: Highlights a specific zone if provided.

  • room_id: Highlights a specific room if provided.

  • spaces: Array of space IDs to highlight (e.g., ['space1', 'space2']).

  • dark_mode, class_name, title: For UI customisation and accessibility.

Behavior

• The floorplan renders in 3D, showing the entire location specified by location_id.

• Users can interact by dragging to adjust the angle, providing a flexible view of the space.

• Highlighting of zones or rooms occurs if zone_id or room_id is provided.

• Space allocations are visualised if the spaces array is included.

Use Case

Ideal for scenarios where users need a comprehensive, visually engaging view of a location, such as showcasing an entire office layout to clients or employees.

Example

const sdk = new gospaceFloorplan.FloorplanSDK({
  key: 'floorplan-container',
  access_token: 'client-specific-access-token',
  location_id: '12345',
  spaces: ['space1', 'space2'],
  dark_mode: true
});
sdk.init();