---
title: setNavigationMode
slug: viewer-3d/methods/setNavigationMode
docTags: 
createdAt: 2024-03-01T14:17:48.684Z
---

Sets the navigation mode for the viewer.

## Example

::codepen{url="https://codepen.io/Catenda/embed/xxoJoxy"}

## Usage

```javascript
const navigationMode = "orbit";

viewer3d.setNavigationMode(navigationMode);
```

## Parameters

### navigationMode

The navigation mode to use.

| **Type**                       | **Required** |
| ------------------------------ | ------------ |
| String or Map\[Array\[Object]] | Yes          |

Some predefined navigation modes are available.

| **Value** | **Description**                              |
| --------- | -------------------------------------------- |
| `orbit`   | Default, orbit camera around a point on drag |
| `pan`     | Pan camera on drag                           |
| `pivot`   | Pivot camera around a point on drag          |

## Advanced Usage

You can also set a custom navigation mode by providing a map of **device** to list of **event actions**.

:::hint{type="info"}
The mapping provided replaces all default navigation and interaction actions.
:::

### Example

::codepen{url="https://codepen.io/Catenda/embed/ZEdjdoq"}

### Usage

```javascript
const navigationMode = {
  mouse: [
    {
      event: "click",
      action: "select",
      filter: {
        button: 0
      }
    },
    {
      event: "doubleClick",
      action: "fitToView",
      filter: {
        button: 0
      }
    },
    {
      event: "drag",
      action: "orbit",
      filter: {
        button: 0
      }
    }
  ]
};

viewer3d.setNavigationMode(navigationMode);
```

**event action**

| **Name** | **Type** | **Description**         |
| -------- | -------- | ----------------------- |
| `action` | String   | The action to perform   |
| `event`  | String   | The event to listen for |
| `filter` | Object   | Filter the event        |
| `scale`  | Number   | Scale the action        |

**device**

Valid values are:

- `mouse`
- `touch`

**action**

Valid values are:

- `click`
- `doubleClick`
- `select`
- `contextMenu`
- `fitToView`
- `zoom`
- `zoomMove`
- `rotateZ`
- `rotateX`
- `moveLeft`
- `moveUp`
- `moveForward`
- `orbit`
- `pivot`
- `pan`

**event**

Valid mouse device values are:

- `click`
- `doubleClick`
- `wheel`
- `drag`

Valid touch device values are:

- `tap`
- `doubleTap`
- `longPress`
- `pinch`
- `pan`

:::hint{type="info"}
Actions are executed in the order specified by the event actions list. If you have cancelled an action (e.g. a `viewer3d.click` event has `preventDefault` set to `true`), the rest of the matching actions are not executed.
:::

**filter**

| **Type**                |
| ----------------------- |
| Map\[Number or Boolean] |

Filter mouse button events with the `button` key, valid values are:

- `0` for left button
- `1` for middle button
- `2` for right button

```javascript
mouse: [
  {
    event: "click",
    action: "contextMenu",
    filter: {
      button: 2
    }
  }
];
```

Filter touch events by number of active pointers and long press with the `pointers` and `longPress` keys.

```javascript
touch: [
  {
    event: "tap",
    action: "select",
    filter: {
      pointers: 2,
      longPress: true
    }
  }
];
```

**scale**

Scale the movement of the action by a factor, default value is `1.0`. Increase the value to make the movement from the action more sensitive. Providing a negative value will invert the movement.