Use drag gestures to rotate Three camera with damping

[janrembold]

Hi, I want to combine the useDrag hook from the use-gesture library and react-spring to rotate a THREE camera. That means to rotate the camera (only horizontally) by 360 degrees. Additionally there should be damping enabled so the rotation does not stop immediately. The movement should feel like OrbitControls from Three (https://threejs.org/examples/#misc_controls_orbit) but fixed to horizontal movements and a fixed camera in the center of the scene.

I got a basic code together to calculate the rotation by hand and feed it into spring but I'm wondering if there isn't already a better way to combine useDrag and useSpring to work together without manually calculating the rotation?

If I have to manually calculate the whole movement I wouldn't need spring. Because then I also have to calculate the whole damping.

Feel free to jump into the code here:
https://codesandbox.io/s/camera-rotation-with-usedrag-and-usespring-l5un5l?file=/src/index.js

Any help is highly appreciated! Thanks in advance!!!
Best, Jan

[andrewthebold]

Perhaps too late of an answer, but I don't think there's a simpler way to "automatically" bind the rotation to the drag. I think the closest would be using the transform option in use-gesture, but that just moves the calculation and you still have to use the spring api.

Here's one way to accomplish the drag + inertia rotation (still doing the cursor -> rotation calc, but the spring is used to handle the momentum animation):

1. While the user is dragging, use api.set() to directly update the rotation (to make it feel responsive to the cursor).
2. When the drag ends, calculate the projected "end position" based on the velocity of the drag, and use api.start() to animate to that end position.

Demo: https://codesandbox.io/s/camera-rotation-with-usedrag-and-usespring-forked-b4z4qz?file=%2Fsrc%2Findex.js (quick hacky code)

[janrembold]

It's never too late for a good answer! 👍 Thanks for that!