https://github.com/yousseffdil/kineticsphere
A mound of spheres that group together in the middle due to a kinematic force
https://github.com/yousseffdil/kineticsphere
3d react react-fiber three-js
Last synced: 2 months ago
JSON representation
A mound of spheres that group together in the middle due to a kinematic force
- Host: GitHub
- URL: https://github.com/yousseffdil/kineticsphere
- Owner: yousseffdil
- Created: 2024-08-12T20:54:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T12:06:29.000Z (over 1 year ago)
- Last Synced: 2025-06-07T06:02:13.566Z (about 1 year ago)
- Topics: 3d, react, react-fiber, three-js
- Language: JavaScript
- Homepage: https://kinetic-sphere-cse6mvocy-yousseffdils-projects.vercel.app/
- Size: 2.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KineticSphere
**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.
## Features
- **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.
## Installation
To get this project running locally:
1. Clone the repository:
```bash
git clone https://github.com/yousseffdil/gravity_JS.git
```
2. Navigate to the project directory:
```bash
cd gravity_JS
```
3.Start the development server:
```bash
npm start
```
5.Open your browser and navigate to http://localhost:3000 to see the project in action.
## Usage
Hover your mouse over the spheres to interact with them.
Watch how they scatter and then reassemble due to the central kinetic force.
## Technologies Used
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.
## Contributing
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.