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

Questions
1

Hi,

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

Thanks

D

2

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

3

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
4

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 = camera.target
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 - camera.target.x);
		let deltaY = Math.abs(nextCameraLook.y - camera.target.y);
		let deltaZ = Math.abs(nextCameraLook.z - camera.target.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(camera.target, nextCameraLook, 0.05));
                        // You could also probably use lookAt instead
		}
		// If we're close enough, finalize movement and disable animation
		else if (camera.target !== nextCameraLook) {
			camera.target = nextCameraLook;
			enableAnim = false;
		}
	}
});

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

2 Likes