Using Navigation

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
JS
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);
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﻿.
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
JS
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();
});
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﻿.
Updated 11 Jun 2024
Did this page help you?
CityGML
Interacting with IFC GUIDs