三个orbitControls tween动画面对目标对象的(正面)

Question

当我单击按钮时，我希望轨道孔子(相机(使用tween.js。

我使用此代码，但发现更改controls.target并越过目标对象的平移之后，我只能缩小一点级别，在放大后，我不能pan pan。

是否有另一种看待对象的方法？谢谢！

var from = {
    x: controls.target.x,
    y: controls.target.y,
    z: controls.target.z
};
var to = {
    x: object.getWorldPosition().x,
    y: object.getWorldPosition().y,
    z: object.getWorldPosition().z
};
var tween = new TWEEN.Tween(from)
    .to(to, 1000)
    .easing(TWEEN.Easing.Quadratic.InOut) // | TWEEN.Easing.Linear.None
    .onUpdate(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .onComplete(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .start();

Answer 1

尝试以下内容：动画启动时，通过controls.enabled = false;禁用控件以防止对动画的任何干扰。接下来，以这样的方式实现您的一个二聚体之一的onComplete()回调：

.onComplete(function() {
    controls.enabled = true;
    camera.getWorldDirection( lookDirection );
    controls.target.copy( camera.position ).add( lookDirection.multiplyScalar( 10 ) );
})

这个想法正在再次启用控件，计算视图的当前外观方向，然后为控件设定新目标。如果您需要每个相机位置的确切目标斑点，也可以设置一个预定义的目标。 10的值在世界单位中，并确定目标应沿着外观方向走多远。

更新的小提琴：https：//jsfiddle.net/ckgo7qu8/