Hello,
We are using pointer coordinates inside useFrame() to create animations:
useFrame(({ pointer }) => {
...
pointerAttractorRef.current.position.set(pointer.x, pointer.y, 0.5);
});
As the mouse hovers close to the center of the canvas x and y should be around 0, but instead they start to jump to some weird values close to -1 and mess up the animations. Once you hover away from the center everything is working properly.
The culprit seems to be the accessibility component ‘A11y’ we use to wrap a Mesh that acts as a button. Removing that makes the issue go away.
A potential workaround was to wrap all 3D elements in the Canvas with a ‘A11ySection’, similar to this example: https://codesandbox.io/p/sandbox/n4rzi. With this the coordinates are now smooth
Our issue is now addressed, but I’m wondering if anybody has clues as to what might have caused this, or if the use of ‘A11ySection’ should be mandatory.
Thanks in advance and cudos for such a great community