# Strategic camera setup (WASD move, mouse rotate)

**URL:** <https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980>\
**Category:** Tutorials and tips\
**Created:** [February 27, 2022, 3:48pm UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980 "2022-02-27T15:48:55Z")\
**Posts on this page:** 5\
**Page:** 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:** [February 27, 2022, 3:48pm UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980/1 "2022-02-27T15:48:55Z")

</div>

Hi

I was unable to find a ready code snippet for the specific camera behavior I wanted. So here you go:

> **[Babylon.js Playground](https://playground.babylonjs.com/#SRZRWV%23805)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

**Behavior**

Camera control is basically like in every modern strategy or turn-based game:

- Move the camera with WASD- or arrow keys. “Move” here means a 2D displacement along the BABYLON x and z axis. I think this is called panning.
- Holding down any mouse button rotates the camera like a normal ArcRotateCamera.

In other words, the code snippet offers a movable ArcRotateCamera.

**Implementation notes**

The move code was the cleanest I could find (see credits in code) and avoids spawning an extra TransformNode. I extend the regular Babylon keyboard plugin ([src](https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/arcRotateCameraKeyboardMoveInput.ts)) so that I only have to take care of the checkInputs() method. See also [docs](https://doc.babylonjs.com/divingDeeper/cameras/customizingCameraInputs#implementing-your-own-input).

Any feedback much appreciated.

Best wishes  
Joe

---

<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:** [February 28, 2022, 2:35pm UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980/2 "2022-02-28T14:35:42Z")

</div>

Nice cc @PolygonalSun and @PirateJC

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [March 1, 2022, 12:18am UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980/3 "2022-03-01T00:18:28Z")

</div>

Awesome example @Joe_Kerr! Creating custom inputs can be tricky so we can always use more examples of successful implementations.

---

<div class="post-metadata">

**Author:** ![Ehtesham\_Ahmad\_Nadim](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ehtesham_ahmad_nadim/32/51458_2.png) [@Ehtesham\_Ahmad\_Nadim](https://forum.babylonjs.com/u/Ehtesham_Ahmad_Nadim)\
**Post date:** [September 26, 2022, 8:19am UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980/4 "2022-09-26T08:19:08Z")

</div>

For me, it is showing that `_onKeyboardObserver` and `_keys` are the private property of `ArcRotateCameraKeyboardMoveInput` which is not accessible in `KeyboardPanningInput`, although the code is working very successfully but I think it’s not a best practice to use the private property of parent class directly

---

<div class="post-metadata">

**Author:** ![ci4anish](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ci4anish/32/22086_2.png) [@ci4anish](https://forum.babylonjs.com/u/ci4anish)\
**Post date:** [September 26, 2022, 12:59pm UTC](https://forum.babylonjs.com/t/strategic-camera-setup-wasd-move-mouse-rotate/27980/5 "2022-09-26T12:59:27Z")

</div>

Thanks!