ArcRotateCamera enable zoom with mouse wheel but disable rotation

Questions
, ,
1

Hi everyone!

Quick question here regarding to ArcRotateCamera. I am trying to replicate the functionality of a camera seen in games such as Diablo 3 or Path of Exile:
zoom-char6

I’ve been trying to get similar results with the following code:

  const targetCamera = camera
  targetCamera.panningInertia = 200
  targetCamera.wheelDeltaPercentage = 0.15
  targetCamera.upperRadiusLimit = 10
  targetCamera.allowUpsideDown = false
  targetCamera.lowerRadiusLimit = 1
  targetCamera.alpha = (-3 * Math.PI) / 4
  targetCamera.beta = Math.PI / 5
  targetCamera.radius = 100
  const cameraInputs = new ArcRotateCameraInputsManager(targetCamera)
  cameraInputs.addMouseWheel()
  targetCamera.inputs = cameraInputs

At one point it used to work pretty well but now it is again not working at all. I wonder what I’ve done wrong?

I have created a playground for this as well, pretty much using the code above. It can be found starting at line 10. I’ve also disabled the attachment of camera controls in createDefaultCamera: https://playground.babylonjs.com/#S7E00P#159

So what I want to achieve:

  • Remove the camera rotation
  • Only add camera zoom with mouse wheel (maybe later with game pad as well?)
  • Maybe add a small fancy tilt when zoomed near the game character…

Has anyone encountered a similar problem here before?

2

After a bit of working with this, I managed to get a somewhat good results by just removing the rotation interaction (ArcRotateCameraPointersInput). I also set the camera controls again in the createDefaultCamera function.

I still wonder my old playground didn’t work? And also what is the best way to achieve this effect:

Maybe I could check the camera position and change the beta if the camera is low enough? Trying to browse through ArcRotateCamera docs for some help :thinking: …

3

I think you can try to check camera.radius and if it is less than the defined threshold change a beta value slightly with some nice animation and easing.

3 Likes
4

This worked perfectly :slight_smile: I just did something really simple beta change in render loop and with simple math:

camera.beta = camera.radius > 7 ? Math.PI / 5 : Math.PI / (2.5 + (camera.radius - 2) / 2)

Didn’t even need easing since it is done by the camera itself :smiley: Basically in every frame I am checking if radius is under seven, and if it is, calculate Math.PI divided with 2.5 (minimum beta radius) + current radius minus 2 (minimum beta) and divided by two since then in the end I get a nice range between 2.5 and 5 :slight_smile:

zoomingdone

Still needs a bit of tweaking so I can zoom into the center of the mesh but getting there :slight_smile:

2 Likes
5

Nice effect! :slight_smile:

1 Like
6

Note to self and others:
You can get even better effect if you use the second parameter of setTarget, like so:

targetCamera.setTarget(characterMeshRoot, true)

The second parameter determines if the target is the position (which at least for me is at the toes of the character) or the bounding box center: “In case of a mesh target, defines whether to target the mesh position or its bounding information center”

2 Likes