Tween / Animate camera to look at a moving object while the camera is moving also


What’s the best way to tween/animate a freecamera for the following:

  1. Camera is at fixed point looking around via mouse drag
  2. On click of object camera starts to move to a vec3
  3. The camera also has a look at target which is moving to a vec3

I can get the camera and look at targets to tween on vec3 but I cant get the camera not to just snap to look at it.

Is there a way of tweening the look to the moving look at object?

So it would be:

  1. Camera and look at objects start to move to their new positions vec3
  2. Camera tweens its lookat to the look at target



Maybe this topic could help Camera movement with Bèzier curves - #11 by PolygonalSun

Also the lockedTarget property of the camera can help a lot.

Finally @PolygonalSun is amazing with Cameras and Inputs

Think I’ve got an alternate work around…

Move look at object to normal (direction of camera) + some distance infront of it, set in render loop for camera to lookat the lookat object (flag lookAtEnabled:Boolean) then tween the lookat object to where its supposed to go, then after about 0.5 seconds start the tween on the camera.

1 Like

Hey @Darcey, I could see the using the Animation object to do the movements that you’re looking for but one approach that I use, especially with a dynamically changing endpoint, would be to use the Lerp function with the render loop and incrementally move things.

var nextCameraLook =
var enableAnim = false;
// On click, take the picked point or some Vector3, update nextCameraLook, and set enableAnim to true
scene.onBeforeRenderObservable.add(() => {
	if (enableAnim) {
		let deltaX = Math.abs(nextCameraLook.x -;
		let deltaY = Math.abs(nextCameraLook.y -;
		let deltaZ = Math.abs(nextCameraLook.z -;

        // 0.01 is acting as a "close enough" threshold to account for float precision issues
		if (deltaX > 0.01 || deltaY > 0.01 || deltaZ > 0.01) {
			camera.setTarget(BABYLON.Vector3.Lerp(, nextCameraLook, 0.05));
                        // You could also probably use lookAt instead
		// If we're close enough, finalize movement and disable animation
		else if ( !== nextCameraLook) { = nextCameraLook;
			enableAnim = false;

Here’s an example of this in action: Chessboard Demo | Babylon.js Playground (