实现阻尼（惯性）到全景旋转

Question

我知道OrbitControls.js有一个阻尼特性，可以添加平滑的全景拖动，也称为缓动。 我想实现相同的功能，但不使用该库。原因是我需要减少使用的代码量并获得对鼠标或触摸事件的更严格控制。

我已经建立了这个Plunker来展示我用作全景视图起始项目的演示。

https://plnkr.co/edit/eX2dwgbrfNoX9RwWaPaH?p=preview

在这个演示中，鼠标坐标被转换为经纬度，从而调整相机位置。这是来自three.js网站的最基本、最简单的全景示例。

当我尝试使用OrbitControls.js中的阻尼效果时（参见此行），我无法获得相同的平滑行为-交互会导致全景图跳动。

if ( scope.enableDamping === true ) {
    sphericalDelta.theta *= ( 1 - scope.dampingFactor );
    sphericalDelta.phi *= ( 1 - scope.dampingFactor );
    panOffset.multiplyScalar( 1 - scope.dampingFactor );
}

我不相信我完全能理解如何将{{damping}}应用到我在Plunker上的例子中。

有谁能指导我如何将{{damping}}应用到我的Plunker示例中？

更新：

通过为经度和纬度添加新的delta值，我成功地进行了进展：请参见更新后的Plunker中的latDelta和lonDelta。我从OrbitControls.js中获得了它的工作原理。由于lonDelta = 0.35，您现在可以在初始页面加载时观察到一个理想的平滑滚动。但是，我不确定这在用户鼠标滚动期间如何操作。至少我正在朝着正确的方向前进。

- Vad

Answer 1

你快了！基本思路是计算用户滑动的速度，并以相同的速度继续滑动，然后逐渐减小速度以模拟摩擦力。如果你不知道，“delta”或d通常意味着距离。如果你可以得到用户移动的距离和完成移动所需的时间，那么就可以使用高中物理学来计算速度并应用它。

下面是从“update”中的重要部分：https://plnkr.co/edit/xgDTcdOY5ZfnoVuW599u?p=preview

// Get time since last frame
var now = Date.now();
var dT = now - then;

if ( isUserInteracting ) {
    // Get distance travelled since last frame
    var dLon = lon - prevLon;
    var dLat = lat - prevLat;
    // velocity = distance / time
    lonVelocity = dLon / dT;
    latVelocity = dLat / dT;
} else {
    // old position + ( velocity * time ) = new position
    lon += lonVelocity * dT;
    lat += latVelocity * dT;
    // friction
    lonVelocity *= ( 1 - dampingFactor );
    latVelocity *= ( 1 - dampingFactor );
}

// Save these for next frame
then = now;
prevLon = lon;
prevLat = lat;

- Ben West