React-three-fiber with react-use-gesture on mobile device

[TimBlanchard]

Hello,

I set up a drag event with react-use-gesture on the x axis on a 3D object that works perfectly on desktop. Except on mobile, the drag barely works.
I use the following code :

const { size, viewport } = useThree();
  const aspect = size.width / viewport.width;
  const [spring, set] = useSpring(() => ({
    position: [0, 0, 0],
  }));
  const bind = useDrag(
    ({ movement: [x] }) =>
      set({
        position: [x / aspect, -4, 0],
      }),
    { eventOptions: { pointer: true } }
  );
const [ref, api] = useBox(() => ({
    args: [1, 0, 1],
    onCollide: () => setTouched(true),
    ...propsCannon,
  }));
useFrame(() => {
    api.position.set(spring.position.payload[0].value, -4, 0);
  });

Is there a way to improve this event on mobile or am i doing wrong with gesture ?

[drcmda]

i think youll have better luck in the use-gesture issue tracker or discussions. @dbismut will know whats going on, although a codesandbox will for sure help

[dbismut]

It is very likely that you forgot to set touch-action: none on your canvas. Scrolling the viewport cancels PointerEvents.

[TimBlanchard]

It worked, thanks a lot !