Animating Universal Camera's Target

Questions
1

Dear Forum

I’m trying to animate the Universalcameras Target to a picked mesh (double click), but i can’t get it to work. So the first question:

Is it possible to make an animation controlling the setTarget property of the universal camera?

https://playground.babylonjs.com/#5EDJ0I#1

If not - is it possible to parent the universal camera? Looking at the docs it does not seem possible. So is there no way to make a smooth focussing of the universal camera? Does that only work with the arc rotate camera?

Thanks!

2

Hi ueli,

The playground overwrites the setTarget function with vectors; you can add a custom setter to the camera that will pass the vectors to the setTarget function instead:

https://playground.babylonjs.com/#5EDJ0I#2

1 Like
3

Hi Gijs

Thank you very much for that answer - that helped a lot!

I do want to animate the target and the position of the universal camera simultaneously - so i need two animations, one for the position and one for the target.

What i don’t understand: if scene.beginAnimation(camera2, 0, 100, false) is only specific to the object but not to the animation, how can i play two animations at the same time for one object? Or is there a way to combine multiple animations in one? If tried grouping, but couldn’t work it out.

Here’s the playground: https://playground.babylonjs.com/#5EDJ0I#6 (double click on the sphere)

A big thank you if somebody has the time to have a look

4

This seems to work:

https://playground.babylonjs.com/#5EDJ0I#6

I just added the _setTarget from my first playground, and removed the second camera.animations = [];

2 Likes
5

Thanks @Gijs! I am using 4.1.0 version, and the code almost worked.

I needed to change _setTarget for _target. It took a me a long time to figure it out, hence I am posting it here. Hope it helps

1 Like
6

Well. I know Babylon have animation system and it’s really cool. But lately I am combining GSAP with Babylon, and they work really good together. It’s really simple to nest animations with GSAP, to set timing of animations, easing, and you can pretty much animate any property. Plus GSAP gives you so many solutions for animating anything on your site.

image

This is part of code where I animate properties of the camera. Basically, the logic is, first “to” is executed, then next one follows then next one follows…etc…

But you can control this, for example, if you want second animation to start before the first one ends, you can add last property like this “-=1” which means, start second animation 1 second before first animation ends. You can see in the code that I used this for last two “to” methods.
GSAP timelines also give you a bunch of methods to control animation playing (play, pause, stop…). Also you get a bunch of observables (onEnd, onProgress, onStart…).

One note: GSAP is not completely free. You can read the licensing rules on their site. But if your project falls under the conditions of Standard “No Charge” License, you are good to go.

2 Likes