Camera animation [startPos - endPos] with THREE.PathControls

Hi,

I am trying to understand if I can use THREE.PathControls to animate camera position in this scenario: basically I have a startPosition and an endPosition and the animation should be on a straight line without changing the orientation of the camera.

I also need to be notified when the animation ends with an event in order to set up a few other things.

Is THREE.PathControls the right component to use or three.js has something which is a better fit for this task?

Thanks

[bevlison]

a changed TWEEN function name delivers error :

Uncaught TypeError: _easingFunction is not a function

using the above sample code.

The cause is the fact that TWEEN.Easing.Sinusoidal.EaseInOut is renamed to TWEEN.Easing.Sinusoidal.InOut

Easy one, but knowing this may help…

[libe]

Thanks for the great tip, worked really well. Below how I did it:

View3D.prototype.onCameraAnimUpdate = function ()
{
    var currentPos = Util.lerp(this.startPos, this.endPos, this.param.t);
    var currentLookAt = Util.lerp(this.startLookAt, this.endLookAt, this.param.t);
    this.camera.position.set(currentPos.x, currentPos.y, currentPos.z);
    this.camera.lookAt(currentLookAt);      
}

View3D.prototype.onCameraAnimComplete = function ()
{
    this.createControlsForCamera();
    this.controls.target = this.endLookAt;
}


View3D.prototype.fitAll = function (viewToFit, center, radius, animate)
{               
    var radius = radius;
    var aabbCenter = center;

    // Compute offset needed to move the camera back that much needed to center AABB (approx: better if from BB front face)
    var offset = radius / Math.tan(Math.PI / 180.0 * 25 * 0.5); 

    // Compute new camera direction and position
    var dir = new THREE.Vector3(0.0, 0.0, 1.0);
    if (this.camera != undefined)
        dir = this.camera.matrix.getColumnZ();
    dir.multiplyScalar(offset); 
    var newPos = new THREE.Vector3();
    newPos.add(aabbCenter, dir);

    // Update camera
    if (!animate)
    {
        this.camera.position.set(newPos.x, newPos.y, newPos.z);
        this.camera.lookAt(aabbCenter);                     
        this.createControlsForCamera();
        this.controls.target = aabbCenter;
    }
    else
    {
        this.startPos = this.camera.position.clone();
        this.startLookAt = this.controls.target;
        this.endPos = newPos;
        this.endLookAt = aabbCenter;

        this.param = {t: 0};
        this.anim = new TWEEN.Tween(this.param).to({t: 1.0}, 500 ).easing( TWEEN.Easing.Sinusoidal.EaseInOut);

        this.anim.onUpdate(Util.bind(this, this.onCameraAnimUpdate));
        this.anim.onComplete(Util.bind(this, this.onCameraAnimComplete));
        this.anim.start();
    } 
}