useWheel gesture firing back on itself

[noahtrotman]

Hi,

I'm currently using the useWheel gesture to trigger/update the state of an array of textures being passed to a shader. I put a console log at the end and when the scroll wheel is fired it will go (starting from 0) 1 , 0 very quickly. Is there something I'm doing incorrectly?

const lethargy = new Lethargy(7, 100, 0.05);

export default function WaveSlider() {
  // const router = useRouter();
  // const domContent = useRef();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState(0);
  const images = useLoader(
    TextureLoader,
    SliderData.map((v) => v.image)
  );

  function next(dir) {
    setLastIndex(currentIndex);
    setCurrentIndex((SliderData.length + dir) % SliderData.length);
  }

  const bindWheel = useWheel(
    ({ movement: [_, my], event, active, wheeling }) => {
      // const wheelDirection = lethargy.check(event);
      // active && gestureListener();
      if (wheeling && my > 0) {
        next(currentIndex + 1);
      } else {
        next(currentIndex - 1);
      }
    },
    {
      bounds: { top: 1, bottom: -1 },
    }
  );

console.log(currentIndex);

The group in the return

<group
        position={[0.07, 0.08, 0.3]}
        rotation={[-0.1, -0.3, -0.02]}
        onClick={() => router.push(urls[currentIndex])}
        {...bindWheel()}
      >
        <Wave {...{ images, currentIndex, lastIndex }} />
      </group>

[dbismut]

Is there a way you can provide a sandbox?

[dbismut]

I'm not sure I understand the question: useWheel will trigger your handler whenever a wheel event is fired. A mouse scroll generates dozens of wheel events, therefore your handler will fire a dozen of times. It can't distinguish wheel events that are actually inertial, that's why Lethargy exists and that's why I linked to the docs which include a sandbox that demonstrates your very use case.

[noahtrotman]

Ok I think I understand what you mean. So the reason the state goes up/down twice is because of all the wheel events happening in the split second? And in order to distinguish all the events I would need to add Lethargy so that the slider just goes to the next image?
Learning a lot here, so I appreciate you help so far

[dbismut]

Yes. Did you have a look at the sandbox in the docs?

[noahtrotman]

yeah I had a brief look. I'm going to try and implement it in a bit

[noahtrotman]

I was able to get it to work with lethargy and updated the sandbox. Thank you for your help and explanations!
Cheers!