How to animate UniversalCamera's Target?

[oschakravarthi]

Hi, 

I could not animate any camera's target. I used all types of cameras (not tried with ArcRotateCamera) but could no achieve it.

Can you please help me?

 

Thanks in advance

[oschakravarthi]

Here is the code:

            var animationTarget = new BABYLON.Animation("animationTarget", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
            animationTarget.setKeys(keysTarget);
            camera.animations.push(animationTarget);

            var animationPosition = new BABYLON.Animation("animationPosition", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
            animationPosition.setKeys(keysPosition);
            camera.animations.push(animationPosition);

            var maxFrame = Math.max(keysTarget[keysTarget.length - 1].frame, keysPosition[keysPosition.length - 1].frame);

            scene.beginAnimation(camera, 0, maxFrame, false, 1);
 

[Raggar]

Here's an example of the FreeCamera:

https://www.babylonjs-playground.com/#XPCUMC

Using the lockedTarget property. I think this might be your issue with the other cameras as well.

[oschakravarthi]

48 minutes ago, Raggar said:

Here's an example of the FreeCamera:

https://www.babylonjs-playground.com/#XPCUMC

Using the lockedTarget property. I think this might be your issue with the other cameras as well.

Thank you @Raggar

 

I have modified it a bit.

https://www.babylonjs-playground.com/#XPCUMC#2

 

It looks like these animations are performed one after the other. How to run them parallel?

 

Basically,  I have a set of points (might be zigzag) to which the camera has to be positioned with animation. So, after moving camera to a point, i need to turn camera towards the next point. Any clue how to achieve this?

 

 

[oschakravarthi]

I am using beginWeightedAnimation to run animations parallel.

Here is the code.

var animationPosition = new BABYLON.Animation("animationPosition", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
            animationPosition.setKeys(positionKeys);
            camera.animations.push(animationPosition);

            var animationTarget = new BABYLON.Animation("animationTarget", "lockedTarget", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
            animationTarget.setKeys(targetKeys);
            camera.animations.push(animationTarget);

            //var maxFrame = Math.max(targetKeys[targetKeys.length - 1].frame, positionKeys[positionKeys.length - 1].frame);

            var a1 = scene.beginWeightedAnimation(camera, positionKeys[0].frame, positionKeys[positionKeys.length - 1].frame, 1.0, false, 1);
            var a2 = scene.beginWeightedAnimation(camera, targetKeys[0].frame, targetKeys[targetKeys.length - 1].frame, 1.0, false, 1);

 

I am getting below error.

Uncaught TypeError: Cannot read property 'm' of null
    at E._processLateAnimationBindings (babylon.js:1)
    at E._animate (babylon.js:1)
    at E.render (babylon.js:1)
    at diwise.babylon.host.max.js:46
    at M._renderLoop (babylon.js:1)
E._processLateAnimationBindings @ babylon.js:1
E._animate @ babylon.js:1
E.render @ babylon.js:1
(anonymous) @ diwise.babylon.host.max.js:46
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
requestAnimationFrame (async)
g.QueueNewFrame @ babylon.js:1
M._renderLoop @ babylon.js:1
 

 

[Sebavan]

No need to copy the full stack when it brings no insight ?

Please, create a playground highlighting your issue.