Rotate camera while dragging without changing the camera position

I am using the Arc rotate camera to show the exterior side of the model. The target has been fixed at the center of the model, so, the camera always looking at the center while rotating. So we can see the 360 view of the model and we can Zoom in and out too. To show the interior of the model also I am using the Arc Rotate camera. So, at the center of the model, I placed the camera and in just 0.2 unit difference I placed the target, So While rotating the camera, I couldn’t show the interior with zoom in out. How to achieve this. If the explanation what I gave is unable to understand. Kindly check the below link. It is similar to what I am trying to achieve. Go to interior view, you can rotate and zoom in and out too.

ping @PolygonalSun

Yes, I can see the example and is totally feasible in BJS. I’m just not sure what your problem is?
Would you have a PG or a sample code to share. I can imagine it is either about setting the camera target depending on context and/or set the limits depend on context. I do this all the time. It shouldn’t be hard to fix.

@mawa I am not saying, this is difficult to achieve in babylonjs. But I don’t know how to get this kind of camera. That’s what I am asking. In the example I have shared, just compare the camera functionality. In Exterior, while dragging, the camera position gets changed. But in the interior, It doesn’t changing.

nw @PolygonalSun will be able to help soon He is an input magician

Ok, I thing I got it. The camera dragging is called panning.
You can set things like limits(on all or either axis), target (and offset from target), sensibility. You can also allow or not allow camera panning.

Here are a couple of inputs you can set for camera panning (and change them depending on your context/camera settings:

camera.panningOriginTarget = new BABYLON.Vector3(0, 0, 0);
camera.panningDistanceLimit = 5;
scene.activeCamera.panningSensibility = 400;

Thanks for your reply @mawa . But I am not pointing the Panning. I am just mentioning the rotation. Just have a look into the link shared in the post. Go to the interior. Then you can rotate and zoom in and out too. I just want to have the same kind of camera.

In this example, the inside and outside views are just two different views (which can be either done with 2 scenes or simply with camera limits and eventually colliders). In this example, you switch from one to the other by clicking on the button.
In this example, I cannot zoom inside the vehicle from the outside view, nor the other way round. So I’m afraid I still do not understand what exactly your issue is.
May be you have your own PG to share?

Edit: In case your interior and exterior is the same scene/model, all you have to do is set the new target
and limits depending on context/view.
For the zoom, it would be something like:
camera.lowerRadiusLimit = 1;
camera.upperRadiusLimit = 30;

Edit2: While reading your initial post again, I detected the words “move the camera”, so I think the error you are making is that you are trying to move the arc rotate camera (closer to the target). But the arc rotate camera will always move around your target. What counts with the arc rotate camera is not so much where it is placed initially but the limits you set for moving and zooming in or out your target.

So the values you really want to change for this are:

1 Like

Dear @mawa . Please have a look into the below PG. I have set the camera for the outside view. Here you can zoom in/out and rotate too. Now I just want to have the same for interior too. Please change this and share only for inside view.

ok, i can do that. will just take a minute. Do you want it to change with a button?

@mawa No just I want only for inside view. Thank you so much for your effort

Just a comment there. This environment example sphere from the PG is just way too small.
So I started by making it somewhat bigger.
Next, as I said, it’s just about setting:

  1. your camera initial position
  2. your target
  3. your upper and lower limits

Hope this helps,

1 Like

If I’m understanding correctly, you’re trying to achieve a behavior where your camera looks outward from a central point and can zoom in on features outside of where the camera is. Is that correct? If so, it might be best to try creating a FreeCamera for the interior and adding mouse wheel support.

var camera = new BABYLON.FreeCamera("interiorCam", position, scene);

You can then swap between your “exterior” camera and your “interior” camera.


@PolygonalSun Exacly. But how to control the speed of zooming and zoom limit like arc rotate camera

The speed can be controlled by modifying the wheelPrecisionX, wheelPrecisionY, and wheelPrecisionZ variables for the camera input

const wheel = camera.inputs.attached.mousewheel;
// Default value for all precision vars is 3
wheel.wheelPrecisionY = 1.5;

Unfortunately, there isn’t any built-in way to limit the distance moved. You may need to make a custom solution for that.

There is another approach that you could also try instead of using the initially provided one. You could also try manually changing the field of view to zoom in using the scene’s onPointerObservable object. Instead of using camera.inputs.addMouseWheel() you could use:

scene.onPointerObservable.add((eventData) => {
        // Default value of FOV for camera
        const upperBound = 0.8;
        const lowerBound = 0;
        const fovMove = eventData.event.deltaY > 0 ? 0.02 : -0.02;
        if (camera.fov + fovMove >= lowerBound && camera.fov + fovMove <= upperBound)
            camera.fov += fovMove;
    }, BABYLON.PointerEventTypes.POINTERWHEEL);

Hopefully, one of these two solutions gets you closer to your goal.

1 Like

Thank you so much @PolygonalSun . These kind of support from all of you people are needs to be much appreciated. Because of your support only, We are sustaining in this wonderful BABYLONJS

@PolygonalSun . It is working, But How to add this same for a touchScreen pinch input for zoom in and out

wow. I’m still wondering how you guys get this understanding from the original. Simply amazing :star_struck:

1 Like

@mawa :sweat_smile: :sweat_smile: