combining values - adding useWheel to useDrag #258
Unanswered
carmandale
asked this question in
Q&A
Replies: 1 comment
-
Please start with formatting your code properly. Also it looks like you're using an outdated version of this lib. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I finally made a decent useDrag work with R3F. ...very proud...it works well on desktop and mobile. Now I want to add useWheel so that your mouse can drag it or your wheel can move it. I know that I can change useDrag to useGesture and add useWheel, but I am not sure how I combine the values. ultimately it would be combining the wheelY scroll in a smooth, seamless way. Can someone help me out? or point me in the right direction?
`function DraggableNeighborhood() {
const ref = useRef();
const { viewport } = useThree();
const [spring, set] = useSpring(() => ({
position: [0, 0, 3],
config: config.molasses,
}));
const bind = useDrag(
({ offset: [x, y] }) => {
const aspect = viewport().factor;
set({
position: [
clamp(x / aspect, -5.7, 7.0),
clamp(-y / aspect, -0.1, 0.1),
3,
],
});
},
{ pointerEvents: true }
);
return (
<a.mesh {...spring} {...bind()} ref={ref}>
</a.mesh>
);
}`
Beta Was this translation helpful? Give feedback.
All reactions