This project is a fan-made demonstration and is not affiliated with or endorsed by any of the football clubs or organizations mentioned. All trademarks and copyrights belong to their respective owners. This project is for educational and personal use only.
This project demonstrates how to create an interactive 3D football kit customization experience using Three.js, React Three Fiber, and other modern web technologies. Users can explore various football kits, change their colors, and interact with the 3D scene.
A huge thank you to all the creators of the 3D models used in this project:
-
Palestine 2022 Home Jersey Free 3D model: by ShehataDesigns (https://www.cgtrader.com/free-3d-models/character/clothing/palestine-national-team-2022-jersey)
-
UEFA Champions League Trophy Free 3D model: by GabbySet (https://www.cgtrader.com/free-3d-models/sports/equipment/uefa-champions-league-trophy-ff0093ff-8cf2-41a4-af81-82954244455c)
-
FIFA Club World Cup: (https://skfb.ly/6SJ8Z) by anDDDres is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
-
Nike's Foot Ball: by Ramprasath Kochi Dilipkumar (https://www.blenderkit.com/asset-gallery?query=order:-score+author_id:29884)
-
Traffic Cone Sign Low-Poly: by Danes_Dysfunction (https://www.blenderkit.com/asset-gallery?query=order:-created+author_id:293025)
-
CHINESE GOAT MODEL: "原创作品。AI 工具创意+创建的 3D 模型（中国传统 12 生肖系列之羊，三星堆青铜器风格）" () by 三维互动网 is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).
These models significantly enhance the visual appeal and functionality of this project.
If you find this project helpful, please consider:
- ⭐ Starring the repository to show your support!
- 📺 Subscribing to my YouTube channel for more Three.js tutorials and development content.
- 3D Kit Visualization: Explore detailed 3D models of football kits.
- Dynamic Color Customization: Change the colors of the kits in real-time using an intuitive color palette.
- Interactive Scene: Rotate, zoom, and pan the camera to view the kits from different angles.
- Model Toggler: Switch between different 3D models of football players.
- Dynamic Props: The scene includes dynamic props such as a football that adjust it's position based on the active model.
- Decorative Props: The scene includes various decorative props such as a trophies,cones and a G.O.A.T😁 placed in random positions.
- Music Player: An integrated music player with a customizable song list.
- Open Source: Fully open-source and customizable.
- Three.js: A JavaScript 3D library.
- React Three Fiber: A React renderer for Three.js.
- @react-three/drei: Useful helpers and abstractions for React Three Fiber.
- Valtio: For simple and fast state management.
- GSAP (GreenSock Animation Platform): For smooth animations and transitions.
- React Icons: For UI icons.
-
Clone the repository:
git clone https://github.com/Footprintarts/ThreeJS-Kit-Customizer.git cd your project -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser:
Visit
http://localhost:5173(or the URL provided by Vite).
- Color Customization: Use the color palette to change the colors of the football kits.
- Model Toggling: Switch between different 3D player models using the model toggler.
- Camera Controls: Use your mouse to rotate, zoom, and pan the camera.
- Music Player: Control the music playback using the player at the bottom right of the screen.
Contributions are welcome! If you find a bug or have an idea for a new feature, please open an issue or submit a pull request.
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them.
- Submit a pull request.
📜 License: This project is licensed under the MIT License. See the LICENSE file for details.