Three.js OrbitControls將補間動畫過渡到目標對象的臉部（正面）

Question

當我單擊一個按鈕時，我希望通過使用tween.js使OrbitControls（相機）平穩地位於對象（正面）的前面。

我使用了這段代碼，但是發現在更改了controls.target並在遠離目標對象的位置上平移后，我只能放大一點，而在放大后則無法平移。

還有另一種看物體的方法嗎？ 謝謝！

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;禁用控件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/