Camera Panning Limit

With cameraPanningLimit, your camera shouldn’t be able to pan outside of the defined radius. If you’re going for something like keeping your camera on a map or in a box, this may not be the best approach. Depending on how you have things set up, you could set up a bounds check to happen as a part of the beforeRender callback:

    // Our built-in 'ground' shape.
    var width = 12;
    var height = 12;
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: width, height: height}, scene);

    // Before each rendered frame, if the target's current value exceeds the limit, move it back.
    scene.beforeRender = () => {
        const xLimit = width / 2;
        const yLimit = height / 2;

        if (camera.target.x < -xLimit) {
            camera.target.x = -xLimit;
        }
        else if (camera.target.x > xLimit) {
            camera.target.x = xLimit;
        }

        if (camera.target.z < -yLimit) {
            camera.target.z = -yLimit;
        }
        else if (camera.target.z > yLimit) {
            camera.target.z = yLimit;
        }
    };

In this example, we have the ground acting as a sort of limit and we’re checking that the camera’s target remains in that limit. For more complex boundaries, this may not be the best solution but this way should also ensure smoother movement at the boundaries.

1 Like