时间戳

首页 > 解决方案 > 带陀螺仪的三个 js 摄像头（设备方向事件）

three.js - 带陀螺仪的三个 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;

我想用移动陀螺仪达到同样的效果。我试过这个：

在 deviceorientation 事件中

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 启用检查器......

标签： three.js3dgyroscope

解决方案

我认为你在滥用deviceorientation数据。事件的alpha, beta, gamma属性分别代表设备围绕z, x, y轴的旋转，因此您应该将它们分配给相机的旋转，而不是它的位置，就像在这个演示中一样。

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

推荐阅读