setNavigationMode

Sets the navigation mode for the viewer.
Example
﻿
Usage
JS
const navigationMode = "orbit";

viewer3d.setNavigationMode(navigationMode);
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.
The mapping provided replaces all default navigation and interaction actions.
Example
﻿
Usage
JS
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);
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
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
JS
mouse: [
  {
    event: "click",
    action: "contextMenu",
    filter: {
      button: 2,
    },
  },
];
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.
JS
touch: [
  {
    event: "tap",
    action: "select",
    filter: {
      pointers: 2,
      longPress: true,
    },
  },
];
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.

Type	Required
String or Map[Array[Object]]	Yes

Value	Description
orbit	Default, orbit camera around a point on drag
pan	Pan camera on drag
pivot	Pivot camera around a point on drag

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

Type
Map[Number or Boolean]

Updated 13 Sep 2024

Did this page help you?

getNavigationSettings

setNavigationSettings