# 3D Mode

### Overview

{% columns %}
{% column width="58.333333333333336%" %}
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.
    {% endcolumn %}

{% column %}

<div align="right"><figure><img src="https://2927481958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnjAXMBvJYG62hlTa1Lk%2Fuploads%2FsFwLTa4e2ZtK5JrWAKHR%2F11-W-QUINCY-COURT%20(7).png?alt=media&#x26;token=e99ba947-bb5f-4cc6-b845-5952f7cba9e0" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

### 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

```javascript
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();
```