Cannon-js. Dynamic body bouncing on y axis when force is applied to x and z axis

Question

so i have a player controller for an fps game that applies force based on keyboard inputs to a dynamic cannon body. angularDampining=1 on the player body. the playercontroller class takes both in the player class which extends cannon body class, and a THREE.js camera the keyboardContorls method is called in the animate function of the main script. the world gravity is set to -20

export class PlayerController {
  private player: Player;
  private camera: THREE.PerspectiveCamera;
  private cameraControls: PointerLockControls;
  private keys: { [key: string]: boolean } = {};

  constructor(player: Player, camera: THREE.PerspectiveCamera) {
    this.player = player;
    this.camera = camera;
    this.cameraControls = new PointerLockControls(this.camera, document.body);

    document.addEventListener("click", () => {
      this.cameraControls.lock();

      document.addEventListener("keydown", (event) => {
        this.keys[event.key] = true;
      });

      document.addEventListener("keyup", (event) => {
        this.keys[event.key] = false;
      });
    });
  }

  keyboardControls() {
    this.camera.position.x = this.player.position.x;
    this.camera.position.y = this.player.position.y + 1.5;
    this.camera.position.z = this.player.position.z;

    const velocity = new CANNON.Vec3(0, 0, 0);
    const quaternion = this.cameraControls.getObject().quaternion;
    const forwardVector = new THREE.Vector3(0, 0, -1).applyQuaternion(
      quaternion
    );

    if (this.keys["w"] || this.keys["W"]) {
      velocity.x = forwardVector.x * this.player.moveSpeed;
      velocity.z = forwardVector.z * this.player.moveSpeed;
    }
    if (this.keys["s"] || this.keys["S"]) {
      velocity.x = -forwardVector.x * this.player.moveSpeed;
      velocity.z = -forwardVector.z * this.player.moveSpeed;
    }
    if (this.keys["a"] || this.keys["A"]) {
      const rightVector = forwardVector
        .clone()
        .applyAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
      velocity.x = velocity.x + rightVector.x * this.player.moveSpeed;
      velocity.z = velocity.z + rightVector.z * this.player.moveSpeed;
    }
    if (this.keys["d"] || this.keys["D"]) {
      const leftVector = forwardVector
        .clone()
        .applyAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
      velocity.z = velocity.z + leftVector.z * this.player.moveSpeed;
      velocity.x = velocity.x + leftVector.x * this.player.moveSpeed;
    }
    if (this.keys[" "]) {
      if (this.player.getJump() === false) {
        this.player.setJump(true);
      }
    }

    if (this.player.velocity.y < 0) {
      this.player.velocity.x = velocity.x;
      this.player.velocity.z = velocity.z;
    } else {
      his.player.velocity.copy(velocity)
    }
  }
}

when keyboard input is given the player body moves fine along x,y and z except as it moves along the x and z axis it bounces on the y axis. the ground is just a box body rotated 90 degrees. any help to completly remove this bouncing would be greatly appreciated

Answer 1

i added a material to the player body and the bodies it interacts with removing the friction