对全景旋转实施阻尼（惯性）

Question

我知道 OrbitControls.js 有一个阻尼功能，它增加了全景图的平滑拖动，也称为缓动。我想实现相同的功能但不使用这个库。原因是我需要减少使用的代码量并更严格地控制鼠标或点击事件。

我构建这个 Plunker 是为了展示我用作全景视图入门项目的演示。

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

在这个演示中，鼠标坐标被转换为latitude/longitude，这将调整相机位置。这是来自 three.js 站点的最基本、最小的全景示例。

当我在玩 OrbitControls.js 的阻尼时 (see this line) 我无法完全获得相同的平滑行为 - 交互导致全景跳跃：

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

我不相信我能完全理解如何将它应用到我在 Plunker 中的示例中。

任何人都可以指导我在正确的方向上应用 damping 来自 Plunker 的示例吗？

更新：

我通过为经度和纬度添加新的增量值来取得进展：请参阅更新的 Plunker 中的 latDelta 和 lonDelta。我知道它在 OrbitControls.js 中是如何工作的。由于 lonDelta = 0.35，您现在可以在初始页面加载时观察到理想的平滑滚动。但是，我不确定在用户鼠标滚动期间如何操作。至少我在朝着正确的方向前进。

Answer 1

你很接近！基本思想是计算出用户平移的速度，并以相同的速度继续平移。然后你可以逐渐降低速度来模拟摩擦。如果您不知道，'delta' 或 d 通常表示距离。如果你能得到用户移动的距离，以及他们这样做所花费的时间，那么你就可以计算速度并应用高中物理。

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

这是重要的部分，来自 update:

// 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;

对全景旋转实施阻尼（惯性）

Implement Damping (Inertia) to Panorama Rotation

javascript

three.js

easing