微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用useGesture在R3F中移动相机,使用橡皮筋轮+拖动

如何解决使用useGesture在R3F中移动相机,使用橡皮筋轮+拖动

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。