How do I limit the camera view to the mesh?

Questions
1

Hello, I’m a novice. I want to know how to limit the view of the camera to the plane. I started the camera collision, but the camera will still pass through the wall. Do you have any good suggestions?(https://playground.babylonjs.com/#V7LQJD#2)

2

If you want to be contained within the walls you need to make sure the camera is located inside of the region.

You also didn’t have an upper wall, so i set the max radius to be 20:

Camera Bounding Box example | Babylon.js Playground (babylonjs.com)

3

Thank you. Maybe my English expression is not very good. I want to limit the camera viewport to the plane all the time. When I roll the mouse, I can get the change of viewport size and change the size of the mesh. I don’t know if this is feasible, and jitter will occur at the collision edge. Please give me some suggestions.

4

Hi @murongming, welcome to Babylon! I’m still a bit confused about what you are trying to achieve here. When the user rolls their mousewheel, you want the camera to zoom in/out, but stay on top of the plane, right? Can you explain why the example that @RaananW posted doesn’t work for you? It does not have any mouse jitter. If you can tell us very specifically what the problem is with the existing playground, we will have a better chance of helping.

One thing you may want to consider is an orthographic camera, like in this playground: https://playground.babylonjs.com/#7ARY1R#10 Edit: sorry, wrong PG. Here’s the right one: Orthographic zoom demo | Babylon.js Playground (babylonjs.com). This allows you to manually control the viewport dimensions.

1 Like
5

Hello, nice to meet you. I think my needs are like this. I need the view of the camera to always be in the bounding box. Make a map effect. But when I use collision, the left and right drag will shake. Do you have any suggestions.BG

1 Like
6

I think what I need is that the Frustum always moves within the bounding box

1 Like
7

How about manually bounding the position of the camera? Something like:

    scene.onBeforeRenderObservable.add(() => {
        camera.target.x = Math.min(1,Math.max(-1,camera.target.x));
        camera.target.z = Math.min(1,Math.max(-1,camera.target.z));
    })

It might take a little experimenting with the bounds but I think you should be able to get the behavior you want this way.

8

Thanks. I found a way. Indeed, we need to calculate the FOV bounding box

1 Like