How do I custom mouse action in orbit controls or use another to do something like this example

I want to do something like this example.

I need to custom mouse action like the above example:

  • drag up or drag down to pan(zoom in/out) the map
  • drag left or drag right to left to rotate the map

I used Orbit controls but it only allows to use left mouse to pan and the right mouse to rotate.
I can’t use the left mouse for both zoom actions and rotate action like the above example.
I read the docs but it only allows custom the mouse buttons
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
I want to custom mouse action in three.js examples like the above example.

Everyone who has experience please help me.
Thank you very much