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

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);
        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();
        } 
    }
  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.