reactjs - 在 R3F 中使用 useGesture 移动相机，滚轮 + 用橡皮筋拖动

Question

我有一个画布，我想在画布上向下或向上移动相机，就像滚动页面一样，通过实际滚动（在 PC 上很有用）或拖动（也适合移动设备）。如果我滚动，我希望手势夹在页面的开头或结尾，如果我拖动，我希望它在相同的页面限制上具有一点橡皮筋效果。现在，如果我只在页面上滚动或只拖动一切正常，但是，如果我滚动然后拖动，事情就会破裂，有时会表现得很奇怪，但主要问题是拖动手势上的边框坐标似乎与车轮运动一起移动。我尝试通过在组件的主要范围内引入一个状态变量来跟踪这种转变，然后在每次使用滚轮手势时更新坐标中的转变，这样我就可以在每次启动滚轮手势时重新校准拖动配置上的边框，但这绝对没有任何作用。这是一个展示这个问题的沙箱，尝试只拖动并查看橡皮筋边界，然后稍微转动一下，注意拖动边界是如何出错的（有时它也会随机射到某个位置）：

https://codesandbox.io/s/use-gesture-test-i3n9o?file=/src/App.js

我错过了什么，如果不是这样，我将如何实现这个（滚动或拖动 - 用橡皮筋）来移动相机？这似乎不是一个复杂的用例，但我在任何地方都找不到任何例子。请帮忙！非常感谢！

标签： reactjsreact-springreact-three-fiberreact-use-gesture