Three.js OrbitControls 补间动画到目标对象的面（前）

Question

当我点击一个按钮时，我希望OrbitControls（相机）通过使用tween.js平滑地位于对象（正面）的前面。

我用这段代码发现改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; 禁用控件以防止对您的动画产生任何干扰。接下来，像这样实现你的补间之一的 onComplete() 回调：

.onComplete(function() {

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

})

想法是再次启用控件，计算视图的当前外观方向，然后为控件设置新目标。如果您需要每个摄像机位置的精确目标点，您还可以设置预定义目标。值 10 以世界单位表示，并确定目标沿观察方向的距离。

已更新 fiddle：https://jsfiddle.net/ckgo7qu8/

Three.js OrbitControls 补间动画到目标对象的面（前）

Three.js OrbitControls tween animation to face(front) of the target object

javascript

animation

three.js

tween.js