Skip to main content

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:

SettingsModules → 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

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

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

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

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:

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

Editing: Shape 24

The Shape Title can be changed according to the actual location or purpose of the shape.

Example

The default shape name:

Shape 24

can be renamed to:

ATM Zone

or:

Food Court

or:

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
Logo: ATM.png [png] [image]
Important

The required logo must first be uploaded or made available through:

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

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:

P1
P2
P3
P4

Each point contains its respective:

X Coordinate
Y Coordinate
Example
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:

Open Shape
   ↓
Select Draw
   ↓
Add Points
   ↓
Close Shape
   ↓
Shape Created
   ↓
Open Coordinate
   ↓
Edit X / Y if Required
   ↓
Update

If another similar shape is required:

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

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:

Active Shape Color
Active Shape Height
Inactive Shape

The Inactive Shape configuration controls how non-selected areas are displayed.

Example settings:

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:

Save

Always verify that the changes are saved before proceeding to the next configuration stage.

Back to top