Restrict camera position and apply elastic stop at edges

I’d like to prevent the camera from going out of bounds of a certain bounding box. I’m using an ArcRotate camera that allows for panning. I’d like to restrict the camera inside the bounding box. When the user pans to beyond the edges of the box I’d like there to be a bit of an elastic effect.

From the arcrotate camera docs the closest I found was panningDistanceLimit. But this takes in a scalar, whereas what I’d like is to pass a bounding box to that. Also didn’t see a way to supply the elastic easing funciton. Any pointers on how this can be done?

Hello! PanningDistanceLimit is compared against the distance to the panning origin: Babylon.js/arcRotateCamera.ts at master · BabylonJS/Babylon.js (github.com), so it wouldn’t work with a bounding box. But there are functions for intersection checking, so you can observe on before render if the camera is inside a mesh or bounding box, and then bring it back inside if so. To provide elastic ease, you can use Animations. Here’s a Playground following this idea, when the camera goes outside of the red box’s bounds I wait a bit, detach the camera control, run an animation and then reattach control when the animation ends: Move camera back | Babylon.js Playground (babylonjs.com)

1 Like