How to change camera location and rotation smoothly

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?

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.

3 Likes

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

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

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

2 Likes