Animate ArcRotate Camera Position

[Quadear]

Hey,

 

I'm trying to animate the position of an arc rotate camera using keyframes, but it doesn't work on babylon 2.5. IIRC, it worked in babylon 2.3.

 

http://www.babylonjs-playground.com/#1COYHE#0

 

Works perfectly with a free cam, but not with an arc rotate one

[GameMonetize]

Hey!

 

this is because position has to be synchronised with alpha and beta values.

You then have two options:

- Manually call "rebuildAnglesAndRadius" : http://www.babylonjs-playground.com/#1COYHE#1

- Animate alpha, beta or radius directly: http://www.babylonjs-playground.com/#1COYHE#2

[Quadear]

Hi,

I wanted to try your 2nd method. To gather the informations concerning the radius / alpha / beta of the "final" place of the camera, i created a ghost cam with the final values.

But it doesn't seem to work, all I've got is a black screen.

http://www.babylonjs-playground.com/#1COYHE#5

 

EDIT: Ok, it doesn't work in the playground (and i don't know why), but it works in my program. So case closed, exept if you have something cleaner to suggest.

Why don't i use the solution 1 ? because the animation can be started inside another animation, and i don't want to have a big stack of functions inside scene.beforeRendering. Idealy, i do want to unbind this in the callback of the animation, but i'm not sure of babylon's way of handeling the "animation end" event when the animation is replaced mid way.

[GameMonetize]

Excellent!

[Wingnut]

http://www.babylonjs-playground.com/#1COYHE#6

In lines 7 and 10... I set some initial .position values.  The vector3 values in those constructors... are targets, not cam position.  So both your cams had no position.

Down at line 62-64  (in the #5 demo), you set the keys for the radiusAnimation 3 times.  Classic pasting error... I do them often.

http://www.babylonjs-playground.com/#1COYHE#7

In #7, the line 7 and line 12 cam constructors... are "raw".  No initial alpha, beta, radius, and no targets. But then I used setTarget() and setPosition() on both.  (target didn't change, as it was already at 0,0,0 origin.  But, I included the .setTarget() calls just the same, for further animating/experimenting fun.)

Hope this helps.

[Quadear]

Yes ! Thank You all for your support !

For all those interested, this is my final function (this is a personalised cam unherited of a ArcRotateCam).

    public flyToPosition(position: BABYLON.Vector3, target: BABYLON.Vector3) {
        let ghostCam = new BABYLON.ArcRotateCamera("ghostCam",  0, 0, 0, position, this._refScene);
        ghostCam.setTarget(target);
        this._refScene.cameras.pop();

        let radiusAnimation = new BABYLON.Animation("camRadius", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
        let alphaAnimation = new BABYLON.Animation("camAlpha", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
        let betaAnimation = new BABYLON.Animation("camBeta", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
        
        // reseting the alpha and beta to a much simpler version
        this.alpha = this.alpha % (Math.PI * 2);
        this.beta = this.beta % (Math.PI * 2);
        if (this.alpha < 0) {
            this.alpha += Math.PI * 2;
        }
        if (this.beta < 0) {
            this.beta += Math.PI * 2;
        }
        
        // used to find the shortest curve IE. if angle == 3PI/2 => take the -1PI/2 instead
        let alpha = ghostCam.alpha;
        if (Math.abs(this.alpha - alpha) > Math.PI) {
            alpha = ghostCam.alpha + (Math.PI * 2);
        }

        let beta = ghostCam.beta;
        if (Math.abs(this.beta - beta) > Math.PI) {
            beta = ghostCam.beta + (Math.PI * 2);
        }

        var keys1 = [{
            frame : 0,
            value : this.radius
        }, {
            frame : 100,
            value : ghostCam.radius
        }];

        var keys2 = [{
            frame : 0,
            value : this.alpha
        }, {
            frame : 100,
            value : alpha
        }];

        var keys3 = [{
            frame : 0,
            value : this.beta
        }, {
            frame : 100,
            value : beta
        }];

        radiusAnimation.setKeys(keys1);
        alphaAnimation.setKeys(keys2);
        betaAnimation.setKeys(keys3);
        this.animations.push(radiusAnimation);
        this.animations.push(alphaAnimation);
        this.animations.push(betaAnimation);
        this._refScene.beginAnimation(this, 0, 100, false, 1);
    }

[Wingnut]

Very nice.  Did you know BJS animations have easing functions available?

http://www.babylonjs-playground.com/#HH1U5#53

Let's parent a camera to that thing...

http://www.babylonjs-playground.com/#HH1U5#54

Oh my God.  (barf)   

Thanks for the code, Quadear.  Good animation work.

[Quadear]

Woot ty for the easing mate, didn't knew that was so easy in BJS.

I keep that for later if i have time to add it everywhere for a more "polished" result.

[The Leftover]

Quadear, most excellent!  Thanks for posting that code.  Made my day.