# Solving FollowCamera and ArcRotateCamera issues when detecting mesh collisions

**URL:** <https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990>\
**Category:** Questions\
**Created:** [September 21, 2021, 2:52pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990 "2021-09-21T14:52:15Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![guido\_wikipoint](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/guido_wikipoint/32/18808_2.png) [@guido\_wikipoint](https://forum.babylonjs.com/u/guido_wikipoint)\
**Post date:** [September 21, 2021, 2:52pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/1 "2021-09-21T14:52:15Z")

</div>

Hi everyone and thanks in advance for the support you may give us.  
We are creating a 3D experience making use of Avatars and 3D environments designed by us.  
We are running into issues, as shown in the following video:  
[https://vimeo.com/610788673](https://vimeo.com/610788673)

In particular, we need implementing the FollowCamera that will allow us to place the camera right behind our 3D character (Avatar) while navigating inside the 3D scene.  
At first, we tried using the FollowCamera commands but the issue we have is that we cannot apply the collision detection on the camera while using FollowCamera. As a consequence, the camera can overlap with the mesh. You can see the issue in this video.

Then we tried using ArcRotateCamera instead of FollowCamera. In this case, we are able to apply collision on the camera and we solve the problem of overlapping the mesh. However, we now have two different problems:

- How can we update the alpha and beta so that we can follow the 3D character (Avatar)?
- How can we update the alpha and beta properties according to the mesh movement?

Again, thanks for the support you will be willing to provide! 🙂

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 21, 2021, 4:33pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/2 "2021-09-21T16:33:19Z")

</div>

@PolygonalSun might be able to help ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 21, 2021, 4:33pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/3 "2021-09-21T16:33:23Z")

</div>



---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [September 21, 2021, 7:37pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/4 "2021-09-21T19:37:43Z")

</div>

Hey @guido_wikipoint, for your first question, you could probably try taking the y value of the player’s rotation vector and using that to update the alpha in the scene’s `onBeforeRenderObservable` or using the scene’s `onKeyboardObservable` when a specific key is pressed:

```auto
scene.onKeyboardObservable.add((eventData) => {
    // You can access the direct event using eventData.event, if you need to check for a specific key
    if (eventData.type === BABYLON.KeyboardEventTypes.KEYDOWN) {
        // Here you can update things or run some custom function to move
        // the camera to behind your player:
        // camera.alpha = player.rotation.y + Math.PI;
        // camera.beta could also be updated in this location
    }
});

```

As far as your second question, I’m not sure that I understand what you mean by according to the mesh movement. Would you be able to elaborate?

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [September 21, 2021, 7:37pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/5 "2021-09-21T19:37:46Z")

</div>



---

<div class="post-metadata">

**Author:** ![guido\_wikipoint](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/guido_wikipoint/32/18808_2.png) [@guido\_wikipoint](https://forum.babylonjs.com/u/guido_wikipoint)\
**Post date:** [September 22, 2021, 7:24am UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/6 "2021-09-22T07:24:59Z")

</div>

Thanks a lot @PolygonalSun  
We have tried implementing your proposed solution but probably we are still missing something.  
The playground we have setup is:  
[https://playground.babylonjs.com/#XJTDLU#106](https://playground.babylonjs.com/#XJTDLU#106)  
The issue is how we can set the alpha property so that the camera positions itself behind the Avatar with smooth transition. The camera we are using is ArcRotateCamera  
I’m attaching two images for a better understanding.

 ![Issue_image2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/8/38f17b75b2b25676eca86363c5798431d28015cb.jpeg)  
 ![Issue_image1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/b/5be8b9bfaf2d5f13f09a9fd918b722cfd5be179b.jpeg)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 22, 2021, 11:33am UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/7 "2021-09-22T11:33:07Z")

</div>

you might find this helpful [ArcRotateCamera animation jitters when the radian difference is too small - #6](https://forum.babylonjs.com/t/arcrotatecamera-animation-jitters-when-the-radian-difference-is-too-small/23718/6) anymating alpha should be the way to go

---

<div class="post-metadata">

**Author:** ![guido\_wikipoint](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/guido_wikipoint/32/18808_2.png) [@guido\_wikipoint](https://forum.babylonjs.com/u/guido_wikipoint)\
**Post date:** [September 22, 2021, 12:54pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/8 "2021-09-22T12:54:30Z")

</div>

Thanks a lot @sebavan for your suggestion. We went through the post that gives interesting suggestions but doesn’t solve our need of being able to calculate alpha & beta dynamically so that we can obtain the effect of ‘positioning the camera behind the 3D character (avatar)’ and follow it while moving. The positioning of the camera should be a smooth transition.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 22, 2021, 1:01pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/9 "2021-09-22T13:01:43Z")

</div>

@PolygonalSun might have some ideas ?

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [September 22, 2021, 4:17pm UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/10 "2021-09-22T16:17:29Z")

</div>

The one option that immediately comes to mind is just to have your final alpha/beta saved into some kind of variable and update it with `Scalar.Lerp` call in the render loop. It’s probably look something like this PG: [ArcRotateCamera follow example | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#447MP7#2)

While this may require much more logic to work in your game, this should demonstrate a smoother movement approach.

---

<div class="post-metadata">

**Author:** ![guido\_wikipoint](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/guido_wikipoint/32/18808_2.png) [@guido\_wikipoint](https://forum.babylonjs.com/u/guido_wikipoint)\
**Post date:** [September 23, 2021, 11:59am UTC](https://forum.babylonjs.com/t/solving-followcamera-and-arcrotatecamera-issues-when-detecting-mesh-collisions/23990/11 "2021-09-23T11:59:25Z")

</div>

Thanks, @PolygonalSun  
We solved all our issues and as you were saying, it required much more logic 🙂