---
title: Using Navigation
slug: viewer-3d/using-navigation
docTags: 
createdAt: 2024-03-01T14:08:11.719Z
---

The 3D Viewer API provides a set of methods for navigating within the 3D scene. Here we will explain how to get started with some common ways of using navigation with the 3D Viewer.

## Using navigation modes

Use navigation modes to handle mouse and touch input devices. The `setNavigationMode` method allows you to define different navigation modes for each input device and user interaction.

### Using touch screen devices

To begin, set the `enableTouch` option to `true` when creating the 3D Viewer instance. This will enable touch screen devices to interact with the 3D scene.

Next, when setting up navigation with touch screen devices we recommend using the `orbit` navigation mode. This mode allows the user to orbit the camera around a point by dragging with one finger. The `pan` navigation mode is also available for panning the camera by dragging with one finger.

Then depending on whether you choose `pan` or `orbit` you can also map the pinch gesture to move forwards and backwards or zoom in and out. Additionally, you can also map the long press gesture to add another dimension of interaction.

### Usage

```javascript
const viewer3dOptions = {
  enableTouch: true
};
const viewer3dElement = document.getElementById("viewer-3d");
const viewer3d = new bimsync.viewer3d.Viewer3D(viewer3dElement, viewer3dOptions);

const navigationMode = {
  touch: [
    {
      action: "click",
      event: "tap",
      filter: { pointers: 1 }
    },
    {
      action: "orbit",
      event: "pan",
      filter: { longPress: false, pointers: 1 },
      scale: 1
    },
    {
      action: "pan",
      event: "pan",
      filter: { longPress: true, pointers: 1 },
      scale: 1
    },
    {
      action: "zoomMove",
      event: "pinch",
      filter: { pointers: 2 }
    }
  ]
};

viewer3d.setNavigationMode(navigationMode);
```

Learn more about the `setNavigationMode` method [here](docId\:XppNs3dnXbhsBJfaIvezv).

## Using direct navigation

Use direct navigation when setting up navigation for other input devices with the `updateNavigation` method. By mapping user inputs to different movements you can control the camera in the 3D scene.

### Usage

```javascript
addEventListener("keydown", (event) => {
  const key = event.key;
  const navigationMovement = {};

  switch (key) {
    case "ArrowUp":
      navigationMovement.moveForward = 1;
      break;
    case "ArrowDown":
      navigationMovement.moveBackward = 1;
      break;
    case "ArrowLeft":
      navigationMovement.moveLeft = 1;
      break;
    case "ArrowRight":
      navigationMovement.moveRight = 1;
      break;
    case "PageUp":
      navigationMovement.moveUp = 1;
      break;
    case "PageDown":
      navigationMovement.moveDown = 1;
      break;
  }

  viewer3d.updateNavigation(navigationMovement);
});

addEventListener("keyup", (event) => {
  viewer3d.stopNavigation();
});
```

Learn more about the `updateNavigation` method [here](docId:4VeByPj7QPuIW_bJy6cwd).