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

Question

When I click a button, I want OrbitControls(camera) be in front of the object(face side) smoothly by using tween.js.

I use this code but find that after changing controls.target and panning far from the target object, I only can zoom in a little level, and after I zoom in, I can't pan.

Is there another way to look at a object? Thanks!

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

Try the following: When the animation starts, disable the controls via controls.enabled = false; to prevent any interference with your animation. Next, implement the onComplete() callback of one of your tweens like so:

.onComplete(function() {

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

})

The idea is enabling the controls again, computing the current look direction of your view and then setting a new target for the controls. You can also set a predefined target if you need an exact target spot for each camera position. The value 10 is in world units and determines how far away the target should be along the look direction.

Updated fiddle: https://jsfiddle.net/ckgo7qu8/