ArcRotateCamera with collision on its target

Hey everyone!

I have been trying to create a arc rotation camera that has collisions in its target (hope that makes sense), so that the camera target can stay in a particular area surrounded by other colliders.

I know how to add collisions to the camera itself but not to the target. I have tried to create a mesh, give it collision and attach it to the target but it doesn’t work at all.

Has anyone done this before or has any idea of how it could be done?

Thank you!

EDIT to add PG:

Not sure how you did set your collisions (a PG would be great) but then, regarding the arcRotateCamera and the collision for its target, you could try simply use the framing behavior
Hope this helps and if not, please try set-up a PG. It will be much easier than making assesments and a lot of Q&A. Meanwhile, have a great day :sunglasses:

Yup a Playground is worth a thousand explanations here :slight_smile:

Here is the PG:

What Im trying to do seems to be a “catch-22” situation, in which I need the collision mesh to follow the camera target, but the camera target has to be in the mesh position.

Using the framing behavior wont let me use the panning function on the camera.

Oh, I see what you want to do! The mesh collision system works for the camera’s position, not mesh-mesh or mesh-point collisions. But we have a intersectsPoint/intersectsMesh that you can use with the camera’s target or a camera collider volume :slight_smile: Mesh Intersections | Babylon.js Documentation (

Camera with collision on its target | Babylon.js Playground (


Thats close to what I need! I have been trying to use “onAfterRenderObservable” to save the target before there was a collision, but with no success, since there seems to be a frame missing:

What do you mean by a frame missing?

I dont know if thats the right term but if you try the PG and do the collision movement a little bit fast, there seems to be something wrong.

Oooh, I think I see it, there’s a bit of discontinuity in the movement there. I think you’ll need a bit more involved approach, as the user could be moving the camera while everything happens, and that will make the calculations harder to work. The idea I have would be like this: while the target is moving freely, keep track of the movement direction D.

Then, if the camera continues moving along D and intersects the mesh, remove the camera control from the user (this is important so the user doesn’t keep moving the camera while you’re trying to move it at the same time), then move the camera along D so that it goes outside the collider volume:
Then, only after you moved the target out of the collision volume, return the camera control to the user.

It would be a bit similar to this Playground example: Move camera back | Babylon.js Playground ( (zoom out until you get out of the red box to see the camera radius animate back inside), but with different properties being animated.

1 Like