Three.js：带有缩放阻尼的OrbitControl？

Question

在three.js的r.72dev分支中添加了阻尼特性。

这可以让旋转更加平滑流畅。

它是否还能为缩放启用阻尼（惯性）呢？

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;

- Alexander Hein

---

你测试过了吗？这样应该比在SO上发问题要快 :) - Mouloud85

当然我测试过了。似乎不起作用。 - Alexander Hein

是的，我的意思是代码还没有实现，但很快可能会出现。您可以查看TrackballControls如何实现它。 - Mouloud85

Answer 1

我给three.js r73的OrbitControls添加了缩放阻尼，请查看此演示：

使用的是three.js r107，但OrbitControls仍然是r73版本： http://jsfiddle.net/y62d4qnr/

使用方法与默认的Orbit Controls一样，您可以尝试调整这些设置以自定义它：

controls.constraint.smoothZoom = true;
controls.constraint.zoomDampingFactor = 0.2;
controls.constraint.smoothZoomSpeed = 5.0;

缺点: 仅适用于鼠标滚轮，不支持触摸缩放或中键。我想它可以扩展，但到目前为止我并没有太在意。欢迎提出建议。

我的解决方案基于Paulkaplan于2013年发布的这个要点：https://gist.github.com/paulkaplan/5770247。不用说，从那时起，three.js和Orbit Controls发生了很多变化。如果一些前作者能够正式添加此功能，我将不胜感激，但有时需要相当长的时间;-)

---

为了给您一个快速的概述，我进行了以下修改:

在OrbitContraint()中：

需要缩放的一堆变量，

添加函数：this.smoothZoomUpdate = function () { /* ... */ };

并在OrbitConstraint.update()函数内调用它：

this.update = function () {
    //...
    this.smoothZoomUpdate ();
    //...
}

同时在THREE.OrbitControls()中修改了函数onMouseWheel() { /* ... */ }

。

- Falk Thiele

---

目前缩放看起来更加流畅。不过，我们如何使旋转和缩放同时发生，并具有这种平滑效果呢？ - andy ram

请进一步解释，我不明白你的问题。平滑旋转仍然可用，请参见：http://jsfiddle.net/rxh6obmp/。 - Falk Thiele

我同意。然而，在这个fiddle中，我们不能同时缩放和旋转。需要暂停或等待时间，有没有办法让它成为可能？ - andy ram