This project aims to build a visually engaging website that showcases 3D graphics of t-shirt models using the power of ThreeJS and React. The website utilizes React Three Fiber, a popular library for creating 3D graphics with ThreeJS in React, to render and animate the 3D models. The overall styling of the website is achieved using TailwindCSS, a utility-first CSS framework, to ensure a modern and responsive design. To bring the website to life with stunning animations, the Framer Motion library is utilized.
- Load, create, and customize captivating 3D models and geometries with the use of various lights, providing an immersive user experience.
- Understand the 3D world with a camera and effectively position objects in the 3D space to create visually appealing scenes.
- Implement reusable code and ensure scalability using Higher Order Components (HOCs) and other industry-standard best practices, resulting in a maintainable codebase.
- Enable custom color and file support, allowing users to personalize their experience on the website.
- Utilize DALLE AI to generate and incorporate images, enhancing the visual content of the t-shirt models.
- Provide users with the ability to download the resulting t-shirt model image as a PNG image, allowing them to share and save their custom designs.
- Ensure the website is responsive and optimized for all devices, providing a seamless experience to users regardless of the device they use.
- ThreeJS: A powerful 3D graphics library used for rendering and animating the 3D models on the website.
- React Three Fiber: A popular library that integrates ThreeJS functionalities into React, making it easier to create 3D graphics within a React application.
- TailwindCSS: A widely used utility-first CSS framework that streamlines the styling process and ensures a modern and responsive design.
- Framer Motion: The most popular library utilized to implement smooth and eye-catching animations, enhancing the overall visual appeal of the React website.
- DALLE AI: An advanced AI-powered system used to generate and incorporate images, enriching the website's visual content.
To run the project locally, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory and install the dependencies using npm or yarn.
- Start the development server using the appropriate npm/yarn command.
- Open your preferred web browser and access the website at
http://localhost:5173(or a different port if specified).
We welcome contributions from the open-source community to enhance this project further. If you would like to contribute, please follow the standard pull request process after making the necessary changes.
This project is licensed under the MIT License, allowing you to use, modify, and distribute the code freely.
We would like to extend our gratitude to the creators and maintainers of ThreeJS, React Three Fiber, TailwindCSS, and Framer Motion for their outstanding work, which made this project possible.
If you have any questions, suggestions, or feedback regarding the project, feel free to contact us at mahmoudh.buss@gmail.com or via GitHub.
Happy coding! 🚀