Animating camera to a new location

Hi, i am trying to create hot-spot like functionality. When i click on a mesh, i want the camera to rotate and point itself at an arbitrary target with a certain radius, pitch, and yaw.

Unfortunately, i cannot seem to get any combination of items to work. I can individually animate any of those 4 things, but if i try to animate multiples, things fall apart and only the last seems to work (in the playground, radius is last so thats the only thing that works. If i reverse order, only the target animation works).

I assume this is not desired behavior? Or maybe i am missing something about how that is supposed to work?

@PolygonalSun any ideas?

@jekelija Not a fix for this issue, but I have just ported some ‘product tour’ code to babylonjs (originally written in three.js) and have implemented hotspot camera animations using tweenjs and logistic interpolation for smooth translations.

You can just set the position and target using onUpdate event and animate a value between 0 and 1 then use it to interpolate between the original position and your target position.

Hey @jekelija, so what I’m seeing is that you have the stopOtherAnimations argument set to true for the InterpolateValueAction call. This is causing your first target change to immediately stop while the radius continues to be changed. What I’d recommend is to change that value to false for both of those actions (or at least set the first action to true to interrupt any other external action animations before starting).

3 Likes

Wow! I am an idiot. Thank you so much, i think that was a copy/paste error from another place i was using interpolatevalueaction.

3 Likes