1

我正在尝试使用接收到的数据DeviceOrientationEvents来动画(旋转)使用three.js 中的相机DeviceOrientationControls。控件会在每个动画帧上更新,并且一切正常。但是,如果我开始滚动,则 noDeviceOrientationEvent会再次触发,直到滚动的惯性完成。

我已经通过从处理程序内登录到控制台确认这些事件在滚动期间不会被触发(或至少不会被调度)DeviceOrientationEvent。我可以看到事件定期触发,直到我开始滚动,然后停止,然后从滚动惯性完成的那一刻开始恢复触发。

手动停止惯性中间滚动(通过触摸屏幕)也会导致deviceorientation事件恢复。

我已禁用scroll脚本中的所有其他事件处理程序。我已将所有触摸事件处理程序设为被动,也尝试将它们设为非被动,并且还尝试在我的脚本中完全禁用所有触摸事件处理程序。

在这一点上,我相当确定这可能是滚动线程的处理(与主线程分开运行)和 IMU 数据的处理如何在浏览器中调度/排队的函数,因此可能没有很好的解决方案,但我在这里问,以防我在自己的故障排除中忽略了一些东西。这似乎不是 three.js 或DeviceOrientationControlsinthree.js 的问题,但我已将其标记为 three.js,以防万一有人在尝试类似的事情时遇到此问题。

我在滚动时启用的独特案例DeviceOrientationControls是滚动驱动“相机装备”(旋转和位置动画的空对象)的动画,同时移动手机旋转相机本身。(这有点像在有轨电车中移动时能够转头环顾四周。)

我的测试是在 iPhone 11 Pro、iOS 13.5.1、Chrome iOS 84 和 Safari 上进行的。我没有在安卓上测试过。

4

1 回答 1

1

多年来,iOS 在滚动期间减慢了重复的 JavaScript 功能。这是为了节省电池消耗,因为它必须在滚动时重新渲染页面很多次,所以它会暂停其他辅助命令,直到滚动完成。请参阅此处了解更多信息

通过“touchstart”和“touchmove”捕获垂直滑动手势,您可以创建自己的自定义滚动功能,而无需实际向下滚动 HTML 页面。或者你可以使用像Hammer.js这样的库来帮助你。

于 2020-08-22T06:37:39.237 回答