Jump to content

How to tween an ArcRotate camera to a selected mesh?


Recommended Posts

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);

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!

Link to comment
Share on other sites

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 ...

Link to comment
Share on other sites

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;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...