# Panning ArcRotateCamera with keyboard without using Ctrl Key

**URL:** <https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878>\
**Category:** Questions\
**Tags:** camera\
**Created:** [April 10, 2021, 9:38pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878 "2021-04-10T21:38:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![giuliano](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giuliano/32/49887_2.png) [@giuliano](https://forum.babylonjs.com/u/giuliano)\
**Post date:** [April 10, 2021, 9:38pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/1 "2021-04-10T21:38:45Z")

</div>

The [ArcRotateCameraKeyboardMoveInput](https://doc.babylonjs.com/typedoc/classes/babylon.arcrotatecamerakeyboardmoveinput#checkinputs) has no option for make the default keys events (up, down, left, right) to pan the camera instead of rotate it, like when you pressed Ctrl + move keys (it activates panning).

There is a \_ctrlPressed variable on the object but can’t be setted, because it will be updated when pressed Ctrl on scene.

Is there a way to make the default movement of the camera, with the direction keys, will be panning instead of rotation?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 11, 2021, 8:41pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/2 "2021-04-11T20:41:22Z")

</div>

Adding @PolygonalSun

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [February 9, 2026, 12:35pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/3 "2026-02-09T12:35:30Z")

</div>

I’d love an arc rotate camera where you could swap between rotate as pimary and pan as primary easily. Is this something that’s supported yet or could be considered as an option?

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [February 10, 2026, 7:26am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/4 "2026-02-10T07:26:14Z")

</div>

Currently, `arcRotateCamera.attachControl` takes a `useCtrlForPanning` option that defaults to `true` and leads to rotation as default motion and panning as secondary option (ctrl pressed).

I’d like to propose adding one more option that would default to `false` and would swaps the 2, so a user can easily switch to pan as default and rotate when ctrl is pressed. This would impact both `arcRotateCameraKeyboardMoveInput` and `arcRotateCameraPointersInput`. This could be useful for some setups (mine is consistency between a 3D viewer and a map viewer). It could also let developers build keyboard-less experiences where a user can press a button to switch between panning and rotating.

I don’t mind trying my hand at a PR, although i’m not super familiar with the codebase and may need some pointers. And if there is a better way to do this, let me know.

Tagging @Evgeni_Popov and @PolygonalSun who seem to be involved in this type of stuff. Hope that’s ok.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 10, 2026, 11:55am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/5 "2026-02-10T11:55:44Z")

</div>

cc @amoebachant and @georgie, but it looks like a good idea!

---

<div class="post-metadata">

**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\
**Post date:** [February 10, 2026, 7:21pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/6 "2026-02-10T19:21:26Z")

</div>

my only concern is that having 2 parameters which are not mutually exclusive may get confusing – what if both are set to true, what behavior does ctrl invoke ?

we could perhaps add a setting which can be enabled ontop of useCtrlForPanning – where if useCtrlForPanning is true (ctrl pans, regular rotates) but if false, it swaps (ctrl rotates, regular pans)

@amoebachant is out of office, once he returns we will discuss and recommend a solution or create PR to solve

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [February 11, 2026, 4:35am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/7 "2026-02-11T04:35:09Z")

</div>

Thanks @Evgeni_Popov .

And @georgie I’m 100% with you on that, i was wondering what was the best approach as well. I feel it’s almost more of an English and naming problem (plus clear documentation) than a technical one.

I noted that useCtrlForPanning default to true and can be set to false to disable panning altogether. And we need to keep backward compatibility. So there are 3 possible behaviors and we’re forced to keep one boolean setting. I see 2 approaches:

1. add swapPanAndRotate option conditioned by useCtrlForPanning
  1. useCtrlForPanning false, ignore swapPanAndRotate → disable panning
  2. useCtrlForPanning true, swapPanAndRotate false (default) → current behaviour
  3. useCtrlForPanning true, swapPanAndRotate true → swap

2. add useCtrlForRotation
  1. useCtrlForPanning true (default), useCtrlForRotation false (default) → current default
  2. useCtrlForPanning false, useCtrlForRotation false (default) → disable panning
  3. useCtrlForPanning false, useCtrlForRotation true → rotate on ctrl
  4. useCtrlForPanning true (default), useCtrlForRotation true → ignore useCtrlForRotation if useCtrlForPanning is true

Just some ideas, I hope this helps. And let me know if there is anything I can help with.

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [February 11, 2026, 11:36am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/8 "2026-02-11T11:36:06Z")

</div>

You want the ctrl key to do something, right? If so, why not simply:

```auto
enum CtrlKeyBehaviours {...}
/** 
@param ctrlKeyBehaviour : bool - useCtrlForPanning (back compat) | CtrlKeyBehaviours - behaviour flag
*/
arcRotateCamera.attachControl( ctrlKeyBehaviour : bool|CtrlKeyBehaviours )

```

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [February 11, 2026, 12:01pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/9 "2026-02-11T12:01:35Z")

</div>

That’s much better yes. I didn’t realize we could rename the argument while maintaining backward compatibility. I thought it was a single object argument with named parameters. 🫣

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [March 9, 2026, 8:58am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/10 "2026-03-09T08:58:58Z")

</div>

Hi @georgie, I wanted to check in if you had had the opportunity to make progress on this? Thanks 🙂

---

<div class="post-metadata">

**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\
**Post date:** [March 9, 2026, 3:56pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/11 "2026-03-09T15:56:09Z")

</div>

@tibotiber does the solution provided by @Joe_Kerr solve your issue without API changes?

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [March 9, 2026, 4:58pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/12 "2026-03-09T16:58:56Z")

</div>

Thanks for the reply @georgie. I thought @Joe_Kerr proposed an API design for the suggested changes that handles backward compat. I didn’t think this API exists as of today.

Did I miss something?

---

<div class="post-metadata">

**Author:** ![r2d2Proton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/r2d2proton/32/46746_2.png) [@r2d2Proton](https://forum.babylonjs.com/u/r2d2Proton)\
**Post date:** [March 9, 2026, 7:56pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/13 "2026-03-09T19:56:42Z")

</div>

@georgie @Joe_Kerr @tibotiber This is exactly the area that I am focused on. It is irritating. Is it possible to have a dropdown of the different Camera types and the options for each? Just asked AI how to replace it. The response does seem off - incorrect:

“how to change babylonjs sandbox camera“  
**How to change babylonjs sandbox camera**

To change the Babylon.js sandbox camera, you can follow these steps:

1. **Set the active camera** : Use the `scene.activeCamera` property to set the camera you want to use in the scene. For example, `scene.activeCamera = myCamera;`.

2. **Attach the camera to the canvas** : Use the `attachControl` method to attach the active camera to the canvas. This method takes parameters like `canvas`, `noPreventDefault`, and `scene.activeCamera.attachControl(canvas, true);`.

3. **[Customize camera inputs](https://www.bing.com/ck/a?!&&p=6d97e4c806b50a3168c7a073139f4dc3e4c10312f82361f2d4a89f006c774fe0JmltdHM9MTc3MzAxNDQwMA&ptn=3&ver=2&hsh=4&fclid=1b232a68-60c0-6ba0-3956-3e2f61af6afe&u=a1aHR0cHM6Ly9kb2MuYmFieWxvbmpzLmNvbS90eXBlZG9jL2NsYXNzZXMvQkFCWUxPTi5DYW1lcmE&ntb=1)**[: Use the `inputs` property to manage and customize the camera’s inputs, such as mouse, keyboard, gamepad, or device orientation. This allows you to add, remove, enable, or disable any input available for the camera.  
By following these steps, you can effectively change and customize the camera used in your Babylon.js sandbox project.](https://www.bing.com/ck/a?!&&p=6d97e4c806b50a3168c7a073139f4dc3e4c10312f82361f2d4a89f006c774fe0JmltdHM9MTc3MzAxNDQwMA&ptn=3&ver=2&hsh=4&fclid=1b232a68-60c0-6ba0-3956-3e2f61af6afe&u=a1aHR0cHM6Ly9kb2MuYmFieWxvbmpzLmNvbS90eXBlZG9jL2NsYXNzZXMvQkFCWUxPTi5DYW1lcmE&ntb=1)

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [March 10, 2026, 7:49am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/14 "2026-03-10T07:49:41Z")

</div>

and @tibotiber

Yes, I thought so, too. Maybe if you do not want to touch `Camera.attachControl`, have it something like this?

```typescript
enum CtrlKeyBehaviours {...}

//back compat
private ctrlBehaviour : CtrlKeyBehaviours = CtrlKeyBehaviours.CurrentBabylonBehaviour;

public setCtrlBehaviourToModeX() { this.ctrlBehaviour = CtrlKeyBehaviours.X }
// or a setter via enum param...?

```

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [March 10, 2026, 8:03am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/15 "2026-03-10T08:03:26Z")

</div>

to me the first suggestion from @Joe_Kerr aligns the best with the current API design.

```auto
enum CtrlKeyBehaviours {…}
/**
@param ctrlKeyBehaviour : bool - useCtrlForPanning (back compat) | CtrlKeyBehaviours - behaviour flag
*/
arcRotateCamera.attachControl( ctrlKeyBehaviour : bool|CtrlKeyBehaviours )

```

@georgie is this still something you and @amoebachant want to discuss first?

---

<div class="post-metadata">

**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\
**Post date:** [March 10, 2026, 3:39pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/16 "2026-03-10T15:39:32Z")

</div>

Ah yes I now see that it is a proposed change not a reference to existing API - my apologies.

Yes @amoebachant and I will discuss API changes to make after the 9.0 release! Can address this alongside the changes to introduce framerate independent movement to camera

---

<div class="post-metadata">

**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\
**Post date:** [March 10, 2026, 4:45pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/17 "2026-03-10T16:45:41Z")

</div>

Awesome, thanks @georgie and ping me here if I can be of any help.

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [March 24, 2026, 6:22am UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/18 "2026-03-24T06:22:38Z")

</div>

When will this feature be released? We urgently need it

---

<div class="post-metadata">

**Author:** ![georgie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/georgie/32/46049_2.png) [@georgie](https://forum.babylonjs.com/u/georgie)\
**Post date:** [March 24, 2026, 8:32pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/19 "2026-03-24T20:32:19Z")

</div>

Hi all, this work will be released after the 9.0 release - there has been a lot of feedback around camera / inputs so i want to tackle all together into a more configurable system, thank you for the feedback and will keep you updated as work evolves!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 24, 2026, 8:45pm UTC](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878/20 "2026-03-24T20:45:24Z")

</div>

Understanding it is really urgent, feel free to contribute it and we ll be happy to review it.

[Next page](https://forum.babylonjs.com/t/panning-arcrotatecamera-with-keyboard-without-using-ctrl-key/19878.md?page=2)