KineticSphere is an interactive 3D simulation built using React Fiber and Three.js, where a group of spheres collide and interact with a central kinetic force. This project demonstrates basic physics principles, collision detection, and user interaction in a web environment.
- Realistic Collision: Spheres collide with each other in real time.
- Central Force: All spheres are attracted to a central point, creating dynamic motion.
- User Interaction: Hovering over the spheres makes them scatter and temporarily break the force's influence.
- Efficient Rendering: Powered by React Fiber and Three.js, ensuring smooth performance even with complex visual interactions.
To get this project running locally:
- Clone the repository:
git clone https://github.com/yousseffdil/gravity_JS.git- Navigate to the project directory:
cd gravity_JS3.Start the development server:
npm start5.Open your browser and navigate to http://localhost:3000 to see the project in action.
Hover your mouse over the spheres to interact with them. Watch how they scatter and then reassemble due to the central kinetic force.
React Fiber: For handling complex UI updates and optimizing the performance of the simulation. Three.js: For rendering 3D graphics directly in the browser. JavaScript: Core language used to build the project.
Contributions are welcome! If you'd like to improve the project or fix any issues, feel free to open a pull request or submit an issue.