Question

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

Answer 1

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

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

thetaDelta = 0;
phiDelta = 0;

改变这一点，以便它们不会立即变为零，而是随着时间的推移逐渐变小：

thetaDelta /= 1.5;
phiDelta /= 1.5;

就是这样！

Answer 2

我使用了一种快速而肮脏的方法来编写此效果 -

在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(); }

这将检查if（鼠标是否已被抬起）和（500ms还没有通过） -
调用controls对象的inertiaFunction（）（这是THREE.OrbitControls的一个实例）
对于用户在提升鼠标的500ms内点击的情况，我们使用timer对象取消setTimeOut。
在你的onMouseDown函数中，添加这个 -

if(dragging)
{
    clearTimeout(timer);
}

不要忘记将dragging，timer和dragging2以及dividingFactor声明为全局变量。使用dividingFactor和setTimeout()中的500毫秒进行游戏，以改变行进距离和惯性运动的持续时间。

Answer 3

对于像我这样的其他开发者，从2019年和three.js r111开始， OrbitControls 现在支持即用惯性阻尼（不要问我为什么），但是this other answer将向您展示如何使用它。

来自ThreeJS的OrbitControl中的惯性

3 个答案: