/CannonBall

Shooting cannon ball game build with threejs

Primary LanguageJavaScript

License: MIT Hacktoberfest

Cannon ball

It is a game was built for scientific calculations project in Information Technology engineering university Click here to play.

intro

Cannonball Movement

We Use a lot of forces which affect the ball during movement and here is the forces we use

  • gravityForce
  • dragForce
  • windForce
  • liftForce
  • buoynancyForce

To simulate the ball movement we use Semi implicit Euler to calculate the ball position and velocity in each frame :

velocity += acceleration * dt;
position += velocity * dt;

As for calculating ball rotation we use Quaternion to produce rotation matrix which we use to calculate torque.

and we update quaternion vector as following :

updateQuaternion(vector, time) {
        const quaternionTemp = new THREE.Quaternion(vector._x * time, vector._y * time, vector._z * time, 0)
        quaternionTemp.multiply(this.quaternion)
        this.quaternion.x += quaternionTemp.x * 0.5
        this.quaternion.y += quaternionTemp.y * 0.5
        this.quaternion.z += quaternionTemp.z * 0.5
        this.quaternion.w += quaternionTemp.w * 0.5
    }

Project stucture

CannonBall
│   README.md
└───src
│   │   index.html
│   │   script.js
|   |   style.css
│   │
│   └───config
│       │   BaseTexures.js
|       |   CannonTextures.js
|       |   FlagBaseTextures.js
|       |   FlagTexture.js
|       |   GrassTexture.js
|       |   Models.js
|       |   TargetTexure.js
│   
└───physics
    │   ball.js
    │   vector.js
    |   world.js
  • physics folder represent the logic of the game and we implement the movement and rotation of the ball in it
  • src/script.js file represent the view of the game and we use Threejs library to create 3d enviroment

Tech Stack

  • HTML
  • Javascript
  • CSS
  • Threejs
  • Webpack

Contribute

If you are beginner take a look in contibute ,if you have any feature or you have bugs create issue and PR to resolve it

Teammates