Zooming by pinching on a Macbook trackpad

[npielawski]

Describe the bug

Hello, and thanks for this nice library!

I am using an orthographic camera with camera controls wheel set to truck. I can pan using two fingers on my Macbook trackpad. If I pinch, it pans in the vertical direction, where I would expect it to Zoom. The touch gesture configuration doesn't alter the behavior.

Pinching inwards pans upwards, while pinching outwards pans downwards, which makes me believe the event is already captured but not linked to zooming.

To Reproduce

Steps to reproduce the behavior:

1. pinch zoom using trackpad.

Code

<Canvas orthographic camera={{ zoom: 100 }}>
  <CameraControls
    mouseButtons={{
      wheel: ACTION.OFFSET
    }}
  />

  <mesh>
    <boxGeometry args={[1, 1, 1e-5]} />
    <meshStandardMaterial color="orange" />
  </mesh>
</Canvas>

Live example

No response

Expected behavior

It would be great if we could have the same behavior as Firefox's PDF viewer, where one pans with two fingers, while pinching zooms in and out.

Screenshots or Video

No response

Device

Desktop

OS

MacOS

Browser

No response

[npielawski]

I found the cause of the problem and how to fix it. The onMouseWheel event doesn't discriminate between pinching and 2D scrolling.

If the line linked above:

switch (this.mouseButtons.wheel) {

is changed to:

const action = event.ctrlKey ? ACTION.ZOOM : this.mouseButtons.wheel;
switch (action) {

Then it all works.

Let me know if you want a PR, and if so, if:

• I should hard code that ctrl+wheel zooms in or
• I should add a new action like mouseButtons.ctrlWheel that configures the behavior when scrolling and pressing the control key at the same time (and pinching at the same occasion).