如何解决三个带陀螺仪的js相机设备方向事件
我有一个桌面相机动画,如下所示: 在 mousemove 事件中我有
mouseX = (event.clientX - windowHalfX) / 100;
mouseY = (event.clientY - windowHalfY) / 100;
在渲染函数中我有
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;
我想用移动陀螺仪达到同样的效果。我试过这个:
在设备方向事件中
gammaRotation = event.gamma;
betaRotation = event.beta;
在渲染器功能中,我的功能与桌面版本大致相同
camera.position.x += (gammaRotation/100 - camera.position.x) * 0.05;
camera.position.y += (-betaRotation/100 - camera.position.y) * 0.05;
但是当测试版为 90 度时(即手机与地面垂直 90 度时),我的相机会跳到一个站点到另一个站点,然后又恢复正常工作。它仅在 beta 为 90 时“跳跃”。 我想这是一个数学错误,但无法真正解决,因为我现在不知道如何为 Iphone 启用检查器...
解决方法
我认为您滥用了 deviceorientation
数据。事件 represents device rotations around the z,x,y
axes respectively 的 alpha,beta,gamma
属性,因此您应该将它们分配给相机的旋转,而不是它的位置,例如 in this demo。
在 3D 空间中旋转时可以预期从 90 到 -90 的跳跃,原因与 +180 的 2D 旋转与 -180 相同。有多种方法可以描述相同的旋转,因此您无法可靠地将旋转转换为位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。