带陀螺仪的三个 js 摄像头（设备方向事件）答案

【问题标题】：Three js camera with gyroscope ( deviceorientation event)带陀螺仪的三个 js 摄像头（设备方向事件）
【发布时间】：2020-12-21 11:30:27
【问题描述】：

我有一个用于桌面的相机动画，如下所示：在 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;

但是当 beta 为 90 时（即手机与地面垂直 90 度时），我的相机会跳到一个站点到另一个站点，然后又恢复正常工作。它仅在 beta 为 90 时“跳跃”。我猜这是一个数学错误，但无法真正解决，因为我现在不知道如何为 Iphone 启用检查器...

【问题讨论】：

【解决方案1】：

我认为您在滥用 deviceorientation 数据。事件represents device rotations around the z, x, y axes respectively 的alpha, beta, gamma 属性，因此您应该将它们分配给相机的旋转，而不是它的位置，例如in this demo。

在 3D 空间中旋转可以预期从 90 到 -90，原因与 +180 的 2D 旋转与 -180 相同。有多种方式可以描述相同的旋转，因此您无法将旋转可靠地转换为位置。

【讨论】：