https://github.com/shahramshakiba/physics-p09

Physics ⁞|⁞ Physics simulation offers realistic effects, dynamic environments where objects interact with each other and respond to user actions and more... ⁞|⁞ ⚪Three.js
https://github.com/shahramshakiba/physics-p09

physics-simulation threejs

Last synced: 2 days ago
JSON representation

Physics ⁞|⁞ Physics simulation offers realistic effects, dynamic environments where objects interact with each other and respond to user actions and more... ⁞|⁞ ⚪Three.js

• Host: GitHub
• URL: https://github.com/shahramshakiba/physics-p09
• Owner: ShahramShakiba
• Created: 2024-06-29T18:37:43.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T16:52:20.000Z (5 months ago)
• Last Synced: 2024-07-04T23:42:58.403Z (5 months ago)
• Topics: physics-simulation, threejs
• Language: JavaScript
• Homepage: https://physics-shahram.netlify.app/
• Size: 4.7 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _Physics_     

###   _Description_

> To begin with, it is important to note that, this project have been sourced from an exceptional `Three.js Journey` Course. 


 

### 👤 Instructed by a _proficient_ and _expert educator_  _"Bruno Simon"_ . 

 


### Introduction to Physics 

In the context of Three.js, physics refers to the simulation of realistic physical interactions within a 3D environment.  
 This includes simulating gravity, collisions, forces, and other physical phenomena to create a more immersive and dynamic experience for users interacting with the 3D scene. 
 


### Why Use Physics ?

One of the primary reasons why physics is used in Three.js is to enhance the realism and interactivity of 3D applications or games. 
 By incorporating physics simulations, developers can create more engaging experiences where objects behave in a lifelike manner, responding to user input and environmental conditions.



### Benefits of Using Physics : 

1. _` Realism and Immersion `_ 


Adding physics to your Three.js scenes enhances realism. Objects can move, collide, and react to forces like gravity just as they would in the real world. 
 This makes your 3D scenes more immersive and engaging for users.

2. _` Interactive Simulations `_ 


Physics enables the creation of interactive simulations where users can interact with objects in the scene. 
 For example, you can create games, educational tools, or interactive product demonstrations where users can manipulate objects and see realistic responses. 
 You can simulate gravity, friction, and other forces, allowing objects to fall, roll, or slide naturally. 

3. _` Enhanced Animation `_ 


Physics can simplify the creation of complex animations. Instead of manually calculating the movement and interaction of objects, a physics engine can handle these calculations, allowing for more natural and fluid animations.

4. _` Dynamic Environments `_ 


With physics, you can create dynamic environments where objects react to each other and to user interactions. 
 This can add a layer of unpredictability and excitement to your scenes, making them more engaging. 



### Libraries 

There are many ways of adding physics to your project, and it depends on what you want to achieve. 
 You can create your own physics with some mathematics and solutions like Raycaster, but if you wish to get realistic physics with tension, friction, bouncing, constraints, pivots, etc. and all that in 3D space, you better use a library. 



There are multiple available libraries. First, you must decide if you need a 3D library or a 2D library. While you might think it has to be a 3D library because Three.js is all about 3D, you might be wrong. 2D libraries are usually much more performant, and if you can sum up your experience physics up to 2D collisions, you better use a 2D library. 



> #### _For "3D Physics", there are three main libraries:_

1. Ammo.js

   - Website: http://schteppe.github.io/ammo.js-demos/

   - Git repository: https://github.com/kripken/ammo.js/

   - Documentation: No documentation

   - Direct JavaScript port of Bullet (a physics engine written in C++)

   - A little heavy

   - Still updated by a community

2. Cannon.js

   - Website: https://lo-th.github.io/Oimo.js/

   - Git repository: https://github.com/lo-th/Oimo.js

   - Documentation: http://lo-th.github.io/Oimo.js/docs.html

   - Lighter than Ammo.js

   - Easier to implement than Ammo.js

   - Mostly maintained by one developer

   - Hasn't been updated for 2 years 

3. Rapier

   - Website: https://rapier.rs/

   - Git repository: https://github.com/dimforge/rapier

   - Documentation: https://rapier.rs/javascript3d/index.html

   - Very similar to Cannon.js

   - Good performance

   - Currently maintained




> #### _For "2D Physics", there are many libraries, but here's the most popular:_ 

1. Matter.js

   - Website: https://brm.io/matter-js/

   - Git repository: https://github.com/liabru/matter-js

   - Documentation: https://brm.io/matter-js/docs/

   - Mostly maintained by one developer

   - Still kind of updated

2. P2.js

   - Website: https://schteppe.github.io/p2.js/

   - Git repository: https://github.com/schteppe/p2.js

   - Documentation: http://schteppe.github.io/p2.js/docs/

   - Mostly maintained by one developer (Same as Cannon.js)

   - Hasn't been update for 2 years

3. Planck.js

   - Website: https://piqnt.com/planck.js/

   - Git repository: https://github.com/shakiba/planck.js

   - Documentation: https://github.com/shakiba/planck.js/tree/master/docs

   - Mostly maintained by one developer

   - Still updated nowadays

  

4. Box2D.js

   - Website: http://kripken.github.io/box2d.js/demo/webgl/box2d.html

   - Git repository: https://github.com/kripken/box2d.js/

   - Documentation: No documentation

   - Mostly maintained by one developer (same as Ammo.js)

   - Still updated nowadays

5. Rapier

   - Website: https://rapier.rs/

   - Git repository: https://github.com/dimforge/rapier

   - Documentation: https://rapier.rs/javascript2d/index.html

   - Same library as for 3D

     





 Feel free to delve into the code as it has been written in a straightforward manner for easy understanding.


 
 
 

> ### _Which Concepts Have I Covered_: 


01. _
Install Cannon.js a 3D Physics library: `  npm install --save cannon  ` 
_

02. _
Generating a world with shapes and bodies within a physics simulation and synchronizing the Three.js world with real-time updates based on the physics simulation.
_

03. _
Generate a stationary floor element utilizing the following technical specifications: quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI / 2)
_

04. _
Implement a bouncing functionality for the Ball by utilizing Contact Material which is a blend of two Materials and encompasses collision properties.
_

05. _
Utilize the applyForce and applyLocalForce methods to exert external forces on an object.
_

06. _
Manage multiple entities by implementing a function
_

07. _
Incorporate geometric entities known as Boxes into the visual environment
_

08. _
Optimize performance by utilizing the SAPBroadphase (Sweep And Prune) algorithm, which conducts body tests along arbitrary axes across multiple iterations. Additionally, enhance performance by incorporating the "Sleep" property.
_

09. _
Monitor body events such as "collide" and "sleep" and trigger a hit sound when elements collide.
_

10. _
Utilize a reset button to eliminate objects from a 3D environment and physics simulation.
_

    





#### _Give it a go in real-time and give me a Star_       _Physics_  




   Experience the auditory effects of colliding objects within the Physics Simulation Environment. 



https://github.com/ShahramShakiba/Physics-p09/assets/110089830/2d7dede6-70dc-42d1-9985-8e931d5cb795

  
 

***

 ##  Find me around the Web