# ArcRotateCamera enable zoom with mouse wheel but disable rotation **URL:** \ **Category:** Questions\ **Tags:** game, camera, arcrotatecamera\ **Created:** [December 30, 2021, 11:42am UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368 "2021-12-30T11:42:11Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\ **Post date:** [December 30, 2021, 11:42am UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/1 "2021-12-30T11:42:11Z")
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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/f/3f097047a0873c11372aceb37ac1f6ee2be37166.gif) I’ve been trying to get similar results with the following code: ```auto 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](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? ---
**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\ **Post date:** [December 30, 2021, 10:14pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/2 "2021-12-30T22:14:39Z")
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. > **[Babylon.js Playground](https://playground.babylonjs.com/#S7E00P%23160)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I still wonder my old playground didn’t work? And also what is the best way to achieve this effect: > [@Panuchka](#): > > Maybe add a small fancy tilt when zoomed near the game character… Maybe I could check the camera position and change the beta if the camera is low enough? Trying to browse through [ArcRotateCamera](https://doc.babylonjs.com/typedoc/classes/babylon.arcrotatecamera) docs for some help 🤔 … ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [December 30, 2021, 10:26pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/3 "2021-12-30T22:26:37Z")
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. ---
**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\ **Post date:** [December 30, 2021, 10:47pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/4 "2021-12-30T22:47:48Z")
This worked perfectly 🙂 I just did something really simple beta change in render loop and with simple math: ```auto 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 😃 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 🙂 ![zoomingdone](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/4/646d2a7111a95066be2d3c73126ce118c3ab5852.gif) Still needs a bit of tweaking so I can zoom into the center of the mesh but getting there 🙂 ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [December 30, 2021, 10:55pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/5 "2021-12-30T22:55:26Z")
Nice effect! 🙂 ---
**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\ **Post date:** [January 9, 2022, 3:43pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-enable-zoom-with-mouse-wheel-but-disable-rotation/26368/6 "2022-01-09T15:43:10Z")
Note to self and others: You can get even better effect if you use the second parameter of `setTarget`, like so: ```auto 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`”