How can I rotate and face a target I'm locomoting towards? (see PG)

Hi, I have a basic locomotion system in place that works fine - you click on the ground and the camera moves to where you just clicked, keeping the same camera rotation.

What I’d REALLY like however is if the camera could also change it’s y rotation to face the locomotion target when it’s off center.

Can anyone suggest how I might do this? Here is a PG of what I have so far: https://playground.babylonjs.com/#ZE2XP7#1

you could the camera target to be lerping from current target to the final one I believe ?

CC @PolygonalSun our camera hero.

1 Like

Honestly, lerping to the camera’s target seems like the easiest way to do it but you’d have to take the travel time into consideration (I’m not 100% sure what the math would look like for this but I’d imagine that the amount value would have to be something like a ratio of the distance between your camera’s next movement point and the total distance from the goal, I think). You’d also have to have some exit criteria so that the Lerp isn’t executed when the desired direction is reached (eg. if(targetPos && BABYLON.Vector3.Distance(targetPos, camera.position) > 1.1) or something like that).

Another approach that comes to mind would be to dynamically generate a key frame array and create animations for both the movement AND the rotation, group them as an [AnimationGroup](https://doc.babylonjs.com/features/featuresDeepDive/animation/groupAnimations), and run the group. If you use this approach, you should also store the active animation group so that you can stop it if a new target position is selected before the animation is complete.

Good use case also for Yuka steering behaviors.. Seek and Arrive should do it. And if you dont want to use Yuka, i have some steering behavior code here.; it’s simpler to copy/paste than Yuka, but you’d need to tweak the behaviors to get it the way you want it.

-ben

2 Likes