如何使用devicemotion数据实现平滑的运动动画

Question

我正在使用devicemotion eventListener中的rotationRate数据来倾斜three.js场景。使用该数据时，场景确实会以正确的角度倾斜，但会产生类似于颠簸的运动效果。有没有办法使运动效果变得平滑？

我目前正在将event.beta和event.gamma数据映射到three.js相机倾斜的适当角度，但是由于旋转数据直接用于角度更新，结果并不是很平滑。我试着将角度增加到一个较小的数字，但这并不能很好地平滑运动。

function handleDeviceMotion(event) {
    rotateX = Math.clip(parseInt((event.rotationRate.beta*10).toFixed(0)), -rotationContain, rotationContain);
    rotateY = Math.clip(parseInt((event.rotationRate.alpha*10).toFixed(0)), -rotationContain, rotationContain);
    rotateXMapped = rotateX.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateYMapped = rotateY.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateXMapped += 0.3;
    rotateYMapped += 0.3;
}

然后在three.js提供的orbitControls.js库中使用rotateXMap和rotateYMap。有没有办法潜在地增加从当前角度到更新角度的移动延迟？数学不是我的强项，我已经尝试解决这个问题一段时间了。

任何帮助都将深表感谢。

Answer 1

事实证明，我只是错过了一些lerp interpolation来平滑倾斜数据的运动。该公式取未来点和当前点，并对它们进行平均。从而产生流畅的动画。

我找到了一个很棒的lerp demo on CodePen。

下面是我更新后的代码：

function handleDeviceMotion(event) {
    // contain rotationRate data, then map it to appropriate scene tilt angles, add lerp to smooth effect
    rotateX = Math.clip(parseInt((event.rotationRate.beta*10).toFixed(0)), -rotationContain, rotationContain);
    rotateY = Math.clip(parseInt((event.rotationRate.alpha*10).toFixed(0)), -rotationContain, rotationContain);
    rotateXMapped = rotateX.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateYMapped = rotateY.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateXLerp = lerp(rotateXLerp, rotateXMapped, 0.15); // 0.1 = default
    rotateYLerp = lerp(rotateYLerp, rotateYMapped, 0.15); // 0.1 = default
}

function lerp(start, end, amt) {
    return (1-amt)*start+amt*end;
}

我希望这对将来的任何人都有帮助！

Answer 2

我相信您会遇到抖动动画，因为您使用的是devicemotion事件(主要用于捕获加速度的变化)，而不是deviceorientation事件(主要用于捕获方向的变化)。deviceorientation是Three.js对其DeviceOrientation控件使用的推荐方法，您可以在这里看到它的实际效果：https://threejs.org/examples/?q=dev#misc_controls_deviceorientation

为了安全起见，你有没有试过用一个非常简单的设置来运行你的场景？这可能有助于排除其他性能瓶颈导致帧速率过低的可能性。