ArcRotateCamera with rotation and zoom center about cursor

Feature requests
1

Hello,
I am searching for a camera module to perform navigation similar to this video clip:

I have not seen any implementation among Babylon’s examples similar to this camera type.
If anyone knows about a similar implementation then I am interested in it.
I have seen the following examples which in some ways solve the zooming part:
https://www.babylonjs-playground.com/#DD2IDJ

The closest camera type I have found among the built-in cameras is the ArcRotateCamera. However, ArcRotateCamera does not allow the camera to be rotated around any other point than the target, which is also what the camera is looking towards. I need a similar camera, but that allows me to separate camera target from rotation point. When scrolling the mouse wheel, the camera should pan and move towards the rotation point without changing the direction of the camera (shown in the clip above).

Here is requested camera controls in text.
Left mouse button:
Rotate the camera, the camera does not change angle to target, but rotates around where the cursor hits the 3D object in scene.

Mouse scroll / zooming:
When zooming, the camera is navigated to where the cursor hits the 3D object, without changing angle to target.

Mouse Wheel Click:
Pan the camera in the view plane.

Right mouse button:
Rotates the camera around its position.

If I need to implement a new camera for this. It is best to hack ArcRotateCamera or create a new one.
suggestions on the best approach to camera development are also helpful.

6 Likes
2

This would be great! It’s a quite similar navigation type as in other tools, for example in Blender, Navisworks and 3ds max.

1 Like
3

I think this is the most intuitive way to navigate in a complex 3D environments only using mouse input!
And can be very useful in many applications…

4

Did you find a solution for this way of navigation? I am really interested in trying this for my project !

5

Here’s a close approximation to what we want by hacking the internals of ArcRotateCamera:
Zoom to mouse position | Babylon.js Playground.

but this is another approach: Babylon.js Playground

3 Likes
6

I have fixed some bugs in this version Babylon.js Playground and created a new version that works really well:

See Zoom to Mouse Playground. Pass “false” to addCameraControls to remove the debug visualizations of the camera target and hit plane.

5 Likes
7

Is there a way to limit the moving range of the camera? I tried to turn on collision detection, but it didn’t work

8

Might be a good topic for a new post. Try setting the upper and lower boundries of alpha, beta and radius. this will limit the camera’s movement

1 Like