ThreeJS中OrbitControls的惯性

Question

我正在使用THREE.OrbitControls旋转我的对象。然而，我想为相机旋转添加一些惯性（如果有人停止移动鼠标，相机会在一段时间后停止）。我该如何实现这一点？

- nme

---

阻尼/惯性现在是r.72中OrbitControls的一个功能。请参见https://dev59.com/Oo7da4cB1Zd3GeqP9y85#32591676。 - WestLangley

Answer 1

以下是一种非常简单的方法来在OrbitControls.js中添加惯性：

在更新函数的末尾（目前为第271-272行），您将看到以下两个变量被设置为零：

thetaDelta = 0;
phiDelta = 0;

将此更改为，它们不会立即归零，而是随着时间变小：

thetaDelta /= 1.5;
phiDelta /= 1.5;

就是这样！

- Andy H.

Answer 2

对于像我一样来到这里的其他开发者，截至2019年和three.js r111版本，OrbitControls现在支持惯性效果，称为阻尼（不要问我为什么），但this other answer将向您展示如何使用它。

- Felipe

Answer 3

我使用了一种快速而简单的方法来编写这个效果 -

在OrbitControls.js中，将此函数添加到主声明内部（或任何位置） -

this.inertiaFunction = function()
{
    scope.rotateLeft( ( 2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed )/dividingFactor);
scope.rotateUp( ( 2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed )/dividingFactor);
dividingFactor+=0.5;
}

在 onMouseDown(event) 函数中，将以下代码添加到第一行 -

 dividingFactor = 1;

（这样因子每次单击时都会被重置）

在onMouseUp(event)函数中，添加了以下行：

dragging2=false;
timer = setTimeout(function(){dragging=false;}, 500);

dragging和dragging2是我们在requestAnimFrame函数中使用的两个标志，用于确定鼠标是否已经抬起并且500毫秒尚未过去。

将此代码添加到您的主要animate()或requestAnimationFrame()函数中 -

if(dragging && !dragging2){ controls.inertiaFunction(); }

这段代码检查了以下情况：如果鼠标已经抬起并且500毫秒还没有过去-调用控件对象（一个THREE.OrbitControls的实例）的惯性函数inertiaFunction()。
对于用户在鼠标抬起后500毫秒内点击的情况，我们使用timer对象来取消设置的超时时间。
在您的onMouseDown函数中添加以下内容-

if(dragging)
{
    clearTimeout(timer);
}

不要忘记将 dragging、timer、dragging2 和 dividingFactor 声明为全局变量。通过调整 dividingFactor 和 setTimeout() 中的 500ms 来改变惯性运动的距离和持续时间。

- sidthekid