# 3D Navigation # Overview The **3D Navigation** feature allows users to create and configure an interactive 3D navigation experience using maps, custom shapes, products, kiosks, logos, and 3D model files such as **GLB** files. To configure 3D Navigation successfully, the setup must be completed in the correct sequence: ## 3D Navigation Setup Flow: **Modules → Navigation → Config → Change Map Mode from 2D to 3D** ↓ **Modules → Navigation → Add Map** ↓ **Create / Configure Shapes** ↓ **Upload and Select Logo / GLB Files** ↓ **Configure 3D Map Settings** ↓ **Map Products** ↓ **Map Kiosk** ↓ **3D Navigation Ready** > **Important:** Before starting the **3D Navigation** configuration, the map must be changed from **2D to 3D** through **Settings**. If the map remains in **2D mode**, the **3D Navigation** will not be displayed correctly. --- ### 1. Prerequisites Before configuring 3D Navigation, make sure the following are available: - A map is available in the system. - The map mode is changed from 2D to 3D. - Required Logo files are available. - Required GLB files are available. - Products that need to be displayed on the map are available. - A kiosk is available for mapping. - Required map shapes have been created and configured. --- ### 2. Change Map Mode from 2D to 3D The first and most important step is to change the map mode from **2D to 3D**. ### Navigation Path ```text Settings → Map Configuration → Map Mode ``` Change the map mode from: **2D** to: **3D** ### Important The map must be configured in **3D mode before continuing with the Navigation configuration**. If the map remains in **2D mode**: - 3D shapes may not be displayed correctly. - 3D models may not appear as expected. - The 3D Navigation experience will not work properly. > **Note:** Always verify the **Map Mode** before testing the final **3D Navigation** setup. ### 3. Open Navigation Module After changing the map mode to **3D**, open the **Navigation** module. ### Navigation Path ```text Modules → Navigation ``` The **Navigation** section contains multiple configuration areas, including: - **Map** - **Product** - **Kiosk** - **Connector** - **Facility** - **Track** - **Shape** - **Config** ### 4. Add a Map The first step inside the **Navigation** module is to add the map on which the **3D Navigation** will be configured. #### Navigation Path ```text Modules → Navigation → Map → Add Map ``` Click **Add Map** to add the required map. After adding the map, it will be available in the **Map** list. #### Map Status A map can have different statuses, such as: - **Published** - **Unpublished** For final navigation usage, ensure that the required map is properly configured and **Published**. ### 5. Create Shapes Shapes are used to define the areas that need to be represented in the **3D Navigation** environment. For example, shapes can represent: - **Rooms** - **Stores** - **Counters** - **Facilities** - **Zones** - **Navigation Areas** - **Other Custom Map Regions** ### Navigation Path ```text Modules → Navigation → Shape ``` Shapes can be created and managed from the **Shape** section. ### 6. Create a Shape Using Map Layout After opening the **Shape** configuration, the **Map Layout** section is available. The **Map Layout** provides the following options: - **Draw** - **Close Shape** - **Undo** - **Duplicate** These options are used to create and modify the shape. --- #### 6.1 Draw The **Draw** option is used to create the shape directly on the map. ### Steps 1. Open the required map. 2. Select **Draw**. 3. Select points on the map to define the shape. 4. Continue adding points in anticlockwise direction until the required area is covered. 5. Select **Close Shape** to complete the shape. The shape is created using multiple coordinate points. #### 6.2 Close Shape After creating the required points, use: ```text Close Shape ``` - This closes the selected points and creates the **final shape**. - A closed shape is required when defining a complete area for 3D representation. #### 6.3 Undo The **Undo** option can be used when an incorrect point or drawing action has been performed. Use it to revert the latest drawing action while creating the shape. #### 6.4 Duplicate - The **Duplicate** option allows an existing shape to be copied. - This is useful when multiple shapes have similar configurations. - Instead of creating every shape from the beginning: ```text Existing Shape ↓ Duplicate ↓ Edit Name / Coordinates / Configuration ↓ New Shape ``` This can reduce the time required to create multiple similar shapes. #### 7. Shape Name and Configuration After creating a shape, the shape can be selected for editing. The **Shape Configuration** contains information such as: - **Title denotes the name of that shape.** - **Logo denotes the shape logo** - **Pin 3D used to add glb files.** - **3D Pin Rotation used to rotate the pins.** - **3D Pin Scale used to manage the size** - **Active Color** - **Inactive Color** - **Active Height** - **Inactive Height** ### Example ```text Editing: Shape 24 ``` The **Shape Title** can be changed according to the actual location or purpose of the shape. ### Example The default shape name: ```text Shape 24 ``` can be renamed to: ```text ATM Zone ``` or: ```text Food Court ``` or: ```text Gate Area ``` depending on the use case. #### 8. Configure Shape Logo A logo can be assigned to a shape. The **Logo** field allows a previously uploaded image file to be selected. ##### Example ```text Logo: ATM.png [png] [image] ``` ##### Important The required logo must first be uploaded or made available through: ```text Modules → Files ``` After the file is available, it can be selected from the **Logo** dropdown in the **Shape Configuration**. #### 9. Upload GLB Files **3D Navigation** supports **GLB files** for displaying 3D models. Before selecting a GLB file in the **Navigation** configuration, the file must first be available in the **Files** module. ##### Navigation Path ```text Modules → Files ``` ##### Steps 1. Open **Modules**. 2. Select **Files**. 3. Upload the required **GLB file**. 4. Make sure the file is available in the file list. 5. Return to **Modules → Navigation**. 6. Select the required **Shape/Configuration**. 7. Select the uploaded **GLB file** where required. ##### Important > **GLB files cannot be selected directly unless they are first available through `Modules → Files`.** The same approach can be followed for required **image/logo files**. # 10. Configure 3D Shape Settings After creating the shape, open the **Config** section. The **Shape Configuration** provides options for controlling how the shape is displayed in the **3D environment**. ### Main Configuration Fields | Field | Description | |---|---| | **Title** | Defines the name of the shape | | **Logo** | Selects the logo/image associated with the shape | | **Pin 3D** | Selects the 3D pin/model | | **3D Pin Rotation** | Controls the rotation of the 3D pin | | **3D Pin Scale** | Controls the scale/size of the 3D pin | | **Active Color** | Defines the color when the shape is active | | **Inactive Color** | Defines the color when the shape is inactive | | **Active Height** | Defines the height of the active shape | | **Inactive Height** | Defines the height of the inactive shape | ### Apply Configuration After making the required changes, click: ```text Update ``` to apply and save the **Shape Configuration**. #### 11. Configure Shape Coordinates The **Coordinate** section allows the exact coordinates of the shape points to be edited. The interface provides points such as: ```text P1 P2 P3 P4 ``` Each point contains its respective: ```text X Coordinate Y Coordinate ``` ##### Example ```text P1 X: 1225 Y: 1070 P2 X: 1276 Y: 1071 P3 X: 1281 Y: 1000 P4 X: 1224 Y: 1000 ``` ##### Coordinate Editing Coordinates can be edited manually when precise positioning is required. ##### Steps 1. Open the required **Shape**. 2. Select **Coordinate**. 3. Select the point that needs to be changed. 4. Edit the **X** and **Y** values. 5. Click **Update**. This allows the shape to be accurately positioned according to the map layout. #### 12. Shape Coordinate Workflow The complete shape creation workflow can be represented as: ```text Open Shape ↓ Select Draw ↓ Add Points ↓ Close Shape ↓ Shape Created ↓ Open Coordinate ↓ Edit X / Y if Required ↓ Update ``` If another similar shape is required: ```text Existing Shape ↓ Duplicate ↓ Edit Title ↓ Edit Coordinates ↓ Update ``` #### 13. Configure the 3D Map After creating the required shapes, configure the main **3D Map** settings. ##### Navigation Path ```text Modules → Navigation → Config ``` The **Config** section contains settings for the **Navigation Map** and its **3D environment**. --- #### 14. 3D Configuration The **3D Configuration** section controls the main **3D Navigation** behavior. ##### Configuration Fields | Field | Description | |---|---| | **Map Mode** | Defines whether the map operates in **2D** or **3D** mode | | **Map Footstep Modal** | Selects the footstep modal configuration | | **Footstep Rotation** | Controls the rotation of the navigation footstep | | **Footstep Scale** | Controls the size/scale of the footstep | | **Active Shape Color** | Defines the color of active shapes | | **Inactive Shape Color** | Defines the color of inactive shapes | | **Active Shape Height** | Defines the height of active shapes | | **Inactive Shape Height** | Defines the height of inactive shapes | ##### Map Mode For **3D Navigation**, the **Map Mode** must be set to: ```text 3D ``` --- #### 15. Active and Inactive Shape Configuration The **3D Configuration** provides separate settings for **active** and **inactive** shapes. ##### Active Shape The **Active Shape** configuration controls how a selected or active navigation area is displayed. Example settings: ```text Active Shape Color Active Shape Height ``` ##### Inactive Shape The **Inactive Shape** configuration controls how non-selected areas are displayed. Example settings: ```text Inactive Shape Color Inactive Shape Height ``` This allows active and inactive areas to have different visual representations in the **3D environment**. #### Save 3D Configuration After completing the configuration, click: ```text Save ``` Always verify that the changes are saved before proceeding to the next configuration stage.