# Add Smooth Transition with ArcRotateCamera

**URL:** <https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927>\
**Category:** Questions\
**Created:** [August 2, 2023, 3:34am UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927 "2023-08-02T03:34:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bsdacres](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bsdacres/32/26225_2.png) [@bsdacres](https://forum.babylonjs.com/u/bsdacres)\
**Post date:** [August 2, 2023, 3:34am UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/1 "2023-08-02T03:34:47Z")

</div>

I’m a bit confused on how to implement a third person camera that smoothly lags behind the player similar to this example:

> **[Babylon.js Playground](https://playground.babylonjs.com/#G703DZ%23126)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

[![](https://img.youtube.com/vi/UuNPHOJ_V5o/maxresdefault.jpg "Simple Third Person Camera (using Three.js/JavaScript)") ](https://www.youtube.com/watch?v=UuNPHOJ_V5o&t=608s)

Tried to implement it my own project had no luck. Is it possible to add such a delay to the ArcRotateCamera? I have all the functionality I need beside the slight delay for the camera to smoothly follow the character.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 2, 2023, 7:16am UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/2 "2023-08-02T07:16:13Z")

</div>

ChaseCamera:

> **[Babylon.js Playground](https://playground.babylonjs.com/#RLBZPF)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

> [@Is it possible to make a FreeCamera follow physically a mesh like the FollowCamera does?](https://forum.babylonjs.com/t/is-it-possible-to-make-a-freecamera-follow-physically-a-mesh-like-the-followcamera-does/27737/4):
>
> Hi @ariwoot ! I am using this technique in my game I am working on in my spare time. It’s a chase camera. You can click and drag to suspend the movement of the cube and rotate around it. Once you release the mouse button the chasing continues. Hope this helps! vulcan_salute EDIT: you can set the pivot to offset the camera to any position at line 33 and change the lerp value at line 66 to set the chasing speed

Place the pivot point where you want it to be and modify the lerp speed.

---

<div class="post-metadata">

**Author:** ![bsdacres](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bsdacres/32/26225_2.png) [@bsdacres](https://forum.babylonjs.com/u/bsdacres)\
**Post date:** [August 2, 2023, 8:12am UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/3 "2023-08-02T08:12:19Z")

</div>

Thanks, it’s close to what I was looking for but seems to break after doing some testing.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 2, 2023, 9:50am UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/4 "2023-08-02T09:50:52Z")

</div>

How can it break?

---

<div class="post-metadata">

**Author:** ![bsdacres](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bsdacres/32/26225_2.png) [@bsdacres](https://forum.babylonjs.com/u/bsdacres)\
**Post date:** [August 2, 2023, 6:37pm UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/5 "2023-08-02T18:37:52Z")

</div>

If clicked at the wrong point the camera get stuck at the last position clicked for some reason

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 2, 2023, 7:52pm UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/6 "2023-08-02T19:52:20Z")

</div>

Dude, you are not supposed to copy paste the whole code. 🙈

The idea of the chase cam is to set a pivot point behind your player. Imagine that the pivot point is attached to the end of a stick which is sticking out from the player’s head backwards slightly offsetted up. Basically you want to parent and offset this point (transformnode) to the player so when he moves or rotates the pivot point moves / rotates as well. Now the only thing you want to do is to lerp the camera position and rotation to match this point’s position and the player’s rotation.

---

<div class="post-metadata">

**Author:** ![bsdacres](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bsdacres/32/26225_2.png) [@bsdacres](https://forum.babylonjs.com/u/bsdacres)\
**Post date:** [August 2, 2023, 9:03pm UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/7 "2023-08-02T21:03:42Z")

</div>

I’ll post a playground shortly. I did make some adjustments for it to follow a target near the player and it works for a time, but occasionally it will break if clicked.

I’m looking more so for something along the lines of [this](https://63c9565b0fd0352c7ff2c3ab--mtbv2.netlify.app/#/) but with the camera lerping between positions. Just having trouble wrapping my head around everything

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 2, 2023, 10:47pm UTC](https://forum.babylonjs.com/t/add-smooth-transition-with-arcrotatecamera/42927/8 "2023-08-02T22:47:14Z")

</div>

> [@bsdacres](#):
>
> I’ll post a playground shortly.

Ok, that’s good. We can then solve your problem much more quicker and easier!
