来自 ThreeJS 的 OrbitControls 中的惯性答案

【问题标题】：Inertia in OrbitControls from ThreeJS来自 ThreeJS 的 OrbitControls 中的惯性
【发布时间】：2019-12-24 03:44:30
【问题描述】：

我正在使用 THREE.OrbitControls 来旋转我的对象。但是我想为相机旋转添加一些惯性（如果有人停止移动鼠标，相机会在一段时间后停止）。我怎样才能做到这一点？

【问题讨论】：

阻尼/惯性现在是 r.72 中 OrbitControls 的一项功能。见stackoverflow.com/a/32591676/1461008。

标签： javascript three.js

【解决方案1】：

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

在更新函数结束时（当前为第 271-272 行），您将看到以下两个变量设置为零：

thetaDelta = 0;
phiDelta = 0;

改变它，这样它们就不会立即变为零，而是随着时间的推移变得更小：

thetaDelta /= 1.5;
phiDelta /= 1.5;

就是这样！

【讨论】：

【解决方案2】：

对于像我一样登陆这里的其他开发人员，截至 2019 年和 three.js r111，OrbitControls 现在支持开箱即用的惯性，它被称为阻尼（不要问我为什么）但是this other 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 的一个实例）
对于用户在离开鼠标500ms内点击的情况，我们使用timer对象取消setTimeOut。
在你的 onMouseDown 函数中，添加这个 -

if(dragging)
{
    clearTimeout(timer);
}

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

【讨论】：