ArcRotateCamera ZoomIn/ZoomOut Issue

Questions
, , ,
1

Hello everyone,
I am developing a project using BabylonJs and at the same time I am using ArcRotateCamera in my project. I am having a problem with the zoom in and zoom out feature of ArcRotateCamera. When the scene is first loaded, when I zoom in very close to an object and at the same time apply panning, I cannot get very close to the object while zooming to the other object. It gets stuck after a while. I have tried many methods, but I could not solve this problem in any way. I would be very grateful if you could help me.

I have prepared a sample simple project (ArcRotateCamera Playground). In this project, you can first zoom in on the red circle and then zoom out and then try to zoom in on the other green colored circle.
Thanks for your suggestions and help.

2

Hello and welcome ! :slight_smile:

I think there is no issue here, it might me a misunderstanding of how the “zoom” works :

  • The ArcRotateCamera is centered on its target
  • When you pan (right click) you move this target in the screen plane

So the fact that you fill “stuck” is just because you reached the minimum radius toward camera target. If there is a mesh behind, you feel stuck, but you are actually at radius minimum, there is no reason why it would continue to go toward this mesh. It’s exactly the same behavior on Blender, and most other 3D softwares, by the way

Now, eventually what you want adding the possiblity to set the camera target toward a mesh :

Hit “F” to focus on the mesh under the pointer

3

Hi Tricotou :slightly_smiling_face:
Thank you for your informative comment. I’ve reviewed your example and it works properly. But I need to press F key for the focus a mesh everytime. I’ve huge 3D company layout in my project. So, when I zoomed in to the any point inside scene I want to be able to zoom in to the another points. To pressing any key for the change camera’s target position every time can be time wasting for the users. Can I change the target position of the camera when I do panning? Is that would be correct way?

4

That’s already the default behavior :thinking:
Coming back to your first PG :

2025-03-11 14-31-07
Panning does change the camera target

5

I understand, Tricotou. I guess I need to apply the following code be able to more close zooming to the another mesh. Because if I don’t apply that code, it feels like the camera is stuck. There is nothing else to do that.

scene.onBeforeRenderObservable.add(function () {
        camera.target.addInPlace(target.subtract(camera.target).scale(0.02));
    });

scene.onKeyboardObservable.add((kbInfo) => {
        if (kbInfo.type === BABYLON.KeyboardEventTypes.KEYDOWN && kbInfo.event.key === "f") {
            const pickResult = scene.pick(scene.pointerX, scene.pointerY);
            if (pickResult.hit && pickResult.pickedMesh) {
                target = pickResult.pickedMesh.position.clone();
            }
        }
    });
6

What you could try is setting the camera target by picking the center of screen, and fitting the corresponding radius

That way you will always zoom toward the center of the screen, but keep in mind you need to set the limits properly

1 Like
7

Thank you so much Tricotou,
That is what I’m looking for. My issue has been resolved. Changing the radius value of the camera is correct way…

1 Like