Camera animation [startPos – endPos] with THREE.PathControls


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?


Author: Fantashit

2 thoughts on “Camera animation [startPos – endPos] with THREE.PathControls

  1. 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);, currentPos.y, currentPos.z);;      
    View3D.prototype.onCameraAnimComplete = function ()
        this.createControlsForCamera(); = 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 ( != undefined)
            dir =;
        var newPos = new THREE.Vector3();
        newPos.add(aabbCenter, dir);
        // Update camera
        if (!animate)
  , newPos.y, newPos.z);
   = aabbCenter;
            this.startPos =;
            this.startLookAt =;
            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));
  2. 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…

Comments are closed.