animating camera target

[DezOnlyOne]

I want to be able to animate my camera and its target to different locations around my scene. I set up an some animation keys but I don't know how I would animate my target. I am using the values for camera._currentTarget to come up with something set the target of the camera too, but I am not sure what I am missing here. Why doesn't this work? All that animates is my camera position but my target remains the same. The camera and target should dolly to the new positions

 

engine.runRenderLoop(function () {
    if(cameraAnimating){
        camera.setTarget(camera._currentTarget);
    }

    scene.render();
});

function animateCamera(pos, tgt, frameCt){
    var animPos_x = new BABYLON.Animation('animPos_x', 'position.x', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
    var animPos_y = new BABYLON.Animation('animPos_y', 'position.y', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
    var animPos_z = new BABYLON.Animation('animPos_z', 'position.z', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

    var animTgt_x = new BABYLON.Animation('animTgt_x', '_currentTarget.x', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
    var animTgt_y = new BABYLON.Animation('animTgt_y', '_currentTarget.y', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
    var animTgt_z = new BABYLON.Animation('animTgt_z', '_currentTarget.z', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

    var animPosKeys_x = [];
    animPosKeys_x.push({ frame: 0, value: camera.position.x });
    animPosKeys_x.push({ frame: frameCt, value: pos.x });
    animPos_x.setKeys(animPosKeys_x);

    var animPosKeys_y = [];
    animPosKeys_y.push({ frame: 0, value: camera.position.y });
    animPosKeys_y.push({ frame: frameCt, value: pos.y });
    animPos_y.setKeys(animPosKeys_y);

    var animPosKeys_z = [];
    animPosKeys_z.push({ frame: 0, value: camera.position.z });
    animPosKeys_z.push({ frame: frameCt, value: pos.z });
    animPos_z.setKeys(animPosKeys_z);

    camera.animations.push(animPos_x);
    camera.animations.push(animPos_y);
    camera.animations.push(animPos_z);

    var animTgtKeys_x = [];
    animTgtKeys_x.push({ frame: 0, value: camera._currentTarget.x });
    animTgtKeys_x.push({ frame: frameCt, value: tgt.x });
    animTgt_x.setKeys(animTgtKeys_x);

    var animTgtKeys_y = [];
    animTgtKeys_y.push({ frame: 0, value: camera._currentTarget.y });
    animTgtKeys_y.push({ frame: frameCt, value: tgt.y });
    animTgt_y.setKeys(animTgtKeys_y);

    var animTgtKeys_z = [];
    animTgtKeys_z.push({ frame: 0, value: camera._currentTarget.z });
    animTgtKeys_z.push({ frame: frameCt, value: tgt.z });
    animTgt_z.setKeys(animTgtKeys_z);

    camera.animations.push(animTgt_x);
    camera.animations.push(animTgt_y);
    camera.animations.push(animTgt_z);

    cameraAnimating = true;
    scene.beginAnimation(camera, 0, frameCt, false, 1, function(){ cameraAnimating = false });
}

 

[Wingnut]

Hi D!  Good to see you again.  You know how it works, around here.  You get best results when you make a test playground that we can all play-with.  It's easier for us all to fix, that way.  Feel like doing one?  thx.

[Pryme8]

 

[DezOnlyOne]

On 8/12/2016 at 9:02 PM, Wingnut said:

Hi D!  Good to see you again.  You know how it works, around here.  You get best results when you make a test playground that we can all play-with.  It's easier for us all to fix, that way.  Feel like doing one?  thx.

Hey Wingnut! Good to see you as well.

http://www.babylonjs-playground.com/#1CN7MM#1

I should have created one in the beginning. 

Right now, line62 is where I am calling the animateCamera function that should animate the camera and its target so that the POV slides to each preset position(cams object). 

Camera position is no problem to animate, the target of the camera is the part that is the pain it seems. 

[DezOnlyOne]

On 8/13/2016 at 2:15 AM, Pryme8 said:

 

This is pretty cool... I still need to animate the target and have the camera follow it, but this is a clean way to do some flying through a scene. 

[Pryme8]

Just Lerp between your camera and target your followings position; then offset it to the desired amount.  And have the cameras keep looking at the real target not the offset.

[Wingnut]

Just get his playground working, @Pryme8. 

@dez - it looks like .lockedTarget is a better property for target animations  (better than ._currentTarget).

http://www.babylonjs-playground.com/#1CN7MM#4

I'm ONLY animating target right now.  Camera position animations were already working fine.

Still doing tests, but I'm seeing some positive results.  Is this enough to get your rolling?

If not, holler. 

I find it interesting that you are using 3 separate float-type animations, one for x, one for y, and one for z (for both cam positions and target positions). 

Did you know that there is a vector3-type animation, too?  It can do all 3 axes in a single animation.  Not sure if that would work for you, but I thought I would remind you of its existence. 

[DezOnlyOne]

@Wingnut

Yes that would make things simpler. I tried to just add a property to the camera called focus and it worked well, but your solution is cleaner and will do exactly what I need it to. I think I will use @Pryme8

 solution for something as well. You guys have been really helpful as always. This is the best forum, and a huge reason I switched over from Threejs. 

 

Thanks

 

[Pryme8]

The math in this might help...  its old school play canvas so the work flow is different, but the math is the same.