Solving FollowCamera and ArcRotateCamera issues when detecting mesh collisions

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:

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! :slight_smile:

@PolygonalSun might be able to help ?

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:

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?

Thanks a lot @PolygonalSun
We have tried implementing your proposed solution but probably we are still missing something.
The playground we have setup is:
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.

you might find this helpful ArcRotateCamera animation jitters when the radian difference is too small - #6 anymating alpha should be the way to go

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.

@PolygonalSun might have some ideas ?

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 (

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

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

1 Like