Pool/Billard game made with BabylonJs

Hello! I’m currently working on a top down Pool/Billard game with BabylonJS and Cannon as the physics plugin.

So basically, my game takes the orignal rules of a classic pool game.

The camera is always above the table and looking at it. In order to aim, the player can move his pointer around the white ball. The white ball will always face the pointer.

Here’s a pseudo code to illustrate how I do it:

WhiteBall Class

 /**
   * Set White ball direction based on pointer inputs
   * @param hitInfo Vector3
   */
  public setDirection (hitInfo: Vector3): void {
    const direction = hitInfo.subtract(this.getPosition())
    const angle = (Math.atan2(direction.z, direction.x) - Math.PI / 2) % (2 * Math.PI)
    this.setRotation(new Vector3(0, -angle, 0))
  }

/**
   * Add force to the white ball
   * @param force number
   */
  private addForce(force: number): void {
    this.resetVelocity() // Make sure there is no existant velocity
    this.getPhysicImpostor()?.applyImpulse(this.getForwardDirection().scale(force), this.getPosition())
  }

In order to shoot the white ball, the player has to click on a button and hold it. Depending on how long the player held the button, the force exerted on the ball will change.

At the moment, everything is working ‘OK’. I can aim correctly and I can shoot the ball correctly. However, I noticed that when I aim to change the direction of the white ball and then applied the force, the ball simply slides on the table and does not roll on it. The white ball rolls on the table when there is no direction changes.

Also, after a lot of testing, I noticed that the initial rotation value of the white ball is set to (0,0,0). Even if I changed this rotation to new Vector3(0,0,0), which is the exact same value, the white ball does not rolls on the table, but slide instead, which make no sense…

Have you ever face this issue? Do you have any solution? Thanks

So I found out that I will have to use:

this.mesh.rotate(axis: Vector3, amount : number, space: Space)

instead of

this.mesh.rotation(vector3: Vector3)

With this change, my rotation system should like like this:

this.rotateMesh(new Vector3(0, 1, 0), -angle, Space.LOCAL) // equal to this.mesh.rotate(...)

instead of this :

this.setRotation(new Vector3(0, -angle, 0))

However, the white ball rotation is all broken now… Do you have any idea why?

Alright guys! This is my solution. I hope that it will help someone!

/**
   * Set White ball direction based on pointer inputs
   * @param hitInfo Vector3
   */
  public setDirection (hitInfo: Vector3): void {
    const direction = hitInfo.subtract(this.getPosition())
    const angle = (Math.atan2(direction.z, direction.x) - Math.PI / 2) % (2 * Math.PI)
    const vectorUp = new Vector3(0, 1, 0)
    const targetRotation = Quaternion.RotationAxis(vectorUp, -angle)
    this.setRotationQuaternion(targetRotation) // custom for : this.mesh.rotationQuaternion = quaternion

    // this.setRotation(new Vector3(0, -angle, 0))
    // this.rotateMesh(vectorUp, -angle, Space.LOCAL)
  }
1 Like