# 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="/files/bWIDddo1yclrHiX4vWCZ" 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();
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.gospace.com/floorplan-sdk/3d-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.