# FPS controller - move wherever you are facing

**URL:** <https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527>\
**Category:** Questions\
**Tags:** rotationaxis, math\
**Created:** [August 30, 2022, 1:52pm UTC](https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527 "2022-08-30T13:52:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tri](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tri/32/21447_2.png) [@tri](https://forum.babylonjs.com/u/tri)\
**Post date:** [August 30, 2022, 1:52pm UTC](https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527/1 "2022-08-30T13:52:26Z")

</div>

Hi,

I have made a custom FPS controller.

When you look up and down (X rotation/Roll), camera.rotation.x adds how much you have moved your mouse up and down.

When you look left and right (Y rotation/Yaw), the player component’s rotation adds the amount you looked left and right.

However, when you move left and right the directions are all messed up and only work relative to the original point.

 ![Screenshot 2022-08-30 at 14.33.34](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/c/2c9c93087b9dae74defba46d505792871218a1d1.png)  
 ![Screenshot 2022-08-30 at 14.34.20](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/5/45b86e84b06fb11b03c4659c113e2f05a93329bc.png)

How do I make it so that you walk left, everywhere you hold down A key?

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/06f28e423a50e7a8aba659d18e34182bc1d70739.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/06f28e423a50e7a8aba659d18e34182bc1d70739.mp4)

I heard I should maybe use quaternions or something like that?  
Apologies for not providing a playground; I wasn’t sure how to put it there as there are a lot of modules in my project 🙂

---

<div class="post-metadata">

**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:** [August 30, 2022, 2:04pm UTC](https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527/2 "2022-08-30T14:04:24Z")

</div>

You may have a look how it is done here - [GitHub - ssatguru/BabylonJS-CharacterController: A CharacterController for BabylonJS](https://github.com/ssatguru/BabylonJS-CharacterController)

---

<div class="post-metadata">

**Author:** ![tri](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tri/32/21447_2.png) [@tri](https://forum.babylonjs.com/u/tri)\
**Post date:** [August 30, 2022, 2:18pm UTC](https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527/3 "2022-08-30T14:18:46Z")

</div>

Thank you so much Andrei!!

---

<div class="post-metadata">

**Author:** ![tri](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tri/32/21447_2.png) [@tri](https://forum.babylonjs.com/u/tri)\
**Post date:** [August 31, 2022, 8:52am UTC](https://forum.babylonjs.com/t/fps-controller-move-wherever-you-are-facing/33527/4 "2022-08-31T08:52:12Z")

</div>

All fixed 😃

For anyone in the future who may have the same issue, i first created a seperate function which listened into keyboard presses and assigned it to some booleans. For example, if A was pressed, moveLeft would be equal to true.  
Then in my movement function I applied friction then assigned the movement booleans to directions which I then normalized. I then multiplied forward/right direction, direction, speed and delta and added it to the velocity.  
Do note, JS cannot do vector maths, so I used babylon.js’ built-in vector maths functions.

```javascript
const keyboardMovement = (scene, engine) => {
  scene.registerBeforeRender(() => {
    delta = engine.getDeltaTime();

    direction = new Vector3.Zero();

    forwardDirection = playerCylinder.getDirection(new Vector3(0, 0, 1));
    forwardDirection.normalize();
    rightDirection = playerCylinder.getDirection(new Vector3(1, 0, 0));
    rightDirection.normalize();

    //Slows down the current movement like a friction force
    velocity.x *= friction * delta;
    velocity.z *= friction * delta;

    //Gravity is applied
    velocity.y += 9.8 * 100.0 * delta; //100.0 = mass

    direction.z = Number(moveBackward) - Number(moveForward);
    direction.x = Number(moveLeft) - Number(moveRight);
    direction.normalize(); // gives direction a length of 1 so diagonal movement isn't faster

    if (moveForward || moveBackward || moveLeft || moveRight) {
      //JS can't do maths with built in operators like * or + for vectors, so we have to use their custom vector maths functions

      //velocity += rightDirection * direction.x * speed * delta;
      // left & right
      velocity = velocity.add(
        rightDirection.scale(direction.x * speed * delta)
      );

      //velocity += forwardDirection * direction.z * speed * delta;
      // forward & back
      velocity = velocity.add(
        forwardDirection.scale(direction.z * speed * delta)
      );
    }

    //Apply velocities to position
    playerCylinder.position.x += -velocity.x * delta; //Left/Right

    playerCylinder.position.z += -velocity.z * delta; //Forwards/Backwards
  });
};

```