How to tween an ArcRotate camera to a selected mesh?

[d13]

Hi Everyone!

Another question for you all that I'm having a surprisingly hard time figuring out.

I'm trying to set up a system where a user selected a mesh, and the ArcRotate camera will then smoothly tween to that mech from it's present position.

I do know how to select a mesh and then set it as the camera's target.

selectedMesh = scene.getMeshByID(meshName);
camera.setTarget(selectedMesh.position);

But, I don't know how to then tween the camera so that it smoothly zooms in on that mesh.

I did come across this old post that seems to demonstrate something similar to what I need, but couldn't get the code or playground example to run:

 

Can anyone point me to playground example that demonstrates this effect, or let me know which next steps I should take?

Thank you!

[d13]

Oh, I think I'm partway there!

I just created a variable called `newCameraTargetSelected` and set it to `true` when the mesh is selected.

Then, in the game loop, run this:

if (newCameraTargetSelected) {
    if (camera.radius > 200) {
      camera.radius -= 1000;
    } else {
      newCameraTargetSelected = false;
    }
  }

That animates the camera - but it's just linear.

I'll try implementing a smoothstep tween on that next ...

[RaananW]

Maybe this will help - https://www.babylonjs-playground.com/#3WRFYB

[d13]

Ok, got it!

I initialized two variables that define and control the animation duration:

let totalAnimationFrames = 60;
let animationFrameCounter = 0;

Then I defined my favourite smoothsetp helper function:

function smoothstep(x) {
  return x * x * (3 - 2 * x);
}

Then, in the game loop, check whether `newCameraTargetSelected` is `true` and then apply the smoothstep tween to the camera's `radius`:

if (newCameraTargetSelected) {
    if (animationFrameCounter < totalAnimationFrames) {

      //Find the normalized time value
      let normalizedTime = animationFrameCounter / totalAnimationFrames;

      //Apply the easing function
      let curvedTime = smoothstep(normalizedTime);

      //Interpolate the sprite's x position based on the curved time
      camera.radius = (200 * curvedTime) + (camera.radius * (1 - curvedTime));

      //Add 1 to the frame counter
      animationFrameCounter += 1;

      //Reset the tween when it's finished
      if (totalAnimationFrames === animationFrameCounter) {
        animationFrameCounter = 0;
        newCameraTargetSelected = false;
      }
    }
  }