How to customize the view operations (rotate, zoom , pan) for different mouse keys?

How can I customize the view operations (rotate, zoom , pan) for different mouse keys?

The CameraManipulator is a class in the engine that interprets mouse and touch events to cause the camera to move. You can take the source code for our CameraManipulater copy it and make your own custom one.

Here is the source code for the standard one that comes with the engine.

Once you have modified the class to create your own one, you can make that the one that is active like this. You assign it to the viewport to replace the built-in one.

const customManipulator = new MyCustomCameraManipulator()

Once installed, the viewport will start propagating all mouse, touch, and VR events to the tool for handling. To get started, the function you probably want to start debugging is the following…

  onPointerDown(event) {
    if (event.pointerType === POINTER_TYPES.mouse) {
      if (this.__dragging == 1) {


      if (event.button == 2) {
        this.__manipulationState = MANIPULATION_MODES.pan
      } else if (event.ctrlKey && event.altKey) {
        this.__manipulationState = MANIPULATION_MODES.dolly
      } else if (event.ctrlKey || event.button == 2) {
        this.__manipulationState = MANIPULATION_MODES.look
      } else {
        this.__manipulationState = this.__defaultManipulationState
    } else if (event.pointerType === POINTER_TYPES.touch) {


There you will be able to customize the mouse buttons and how the touch events get handled.

1 Like

Its also worth noting that the builtin CameraManipulator has a bunch of options for changing how it works. You can see this article goes over the main rotation models.

you could also derived/extend the existing CameraManipulator class to make your custom class. and only modify that methods that you want.
that way, you can automatically take advantage of any improvements made by others to the CameraManipulator class.