How to change camera location and rotation smoothly

Questions
1

I am using a UniversalCamera when displaying a scene. This camera works well for user control. I can also move and set the camera’s rotation instantly to any specified location and rotation. I can even smoothly move the camera from one location to another by generating keyframes using a curve and feeding that to an animation. But I can’t seem to figure out the best way to generate smooth rotation keyframes given a starting rotation and an ending rotation. So, I have two questions:

  1. Is there a simple way to animate the position and rotation of a camera given starting and ending position and rotation information?

  2. What is the best way to generate rotation keyframes that can be used in an animation sequence?

2

This is the example for arcRotate camera prototype function but you can make it work for Universal camera as well - https://www.babylonjs-playground.com/#HH1U5#103

BABYLON.ArcRotateCamera.prototype.spinTo = function (whichprop, targetval, speed) {
    var ease = new BABYLON.CubicEase();
    ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
	BABYLON.Animation.CreateAndStartAnimation('at4', this, whichprop, speed, 120, this[whichprop], targetval, 0, ease);
}

Then call it with
camera.spinTo("radius", 10, 100)

CreateAndStartAnimation runs one time and then disposes itself on end.

4 Likes
3

Thank you, this is exactly what I am looking for. However, I am having trouble modifying the example to work with a UniversalCamera. Here is the updated PG:

It seems like it is not able to recognize a child property of rotation.

1 Like
4

Looking up the starting value is a little trickier when the target property is nested (e.g. “rotation.x”). Here’s code to do it that I derived from the RuntimeAnimation’s _preparePath function. :slight_smile:
Edit: couldn’t resist simplifying it a little more. :beers:

4 Likes
5

Thanks Blake. That works perfectly. I even changed my camera position animation to use this rather than generating keyframes. Cheers.

2 Likes