This project was built using a tutorial by JavaScript Mastery on youtube.
This is a 3D T-Shirt Designer application where users can design their own T-shirts using user-uploaded patterns and logos. The website includes technologies such as ThreeJS, React Three Fiber, TailwindCSS, Framer Motion, and OpenAI.
⭐ Note: This website may require some time for the server to spin up and the 3D shirt to render. In addition, the AI functionality of this app may become unresponsive due to an inactive key, however users can still upload their own images.
- Clone the repository.
- Install the dependencies in both the client and server folders by running
npm install. - Create a .env file in the server folder and add the following environment variables:
OPENAI_API_KEY
- Start the client by running
npm run dev. - Start the server by running
npm start. - Navigate to http://localhost:8080 to view the project.
⭐ Note: An active OpenAI api key is required for the AI funtionality to work.
- Customization: Users can upload different patterns and logos to design their T-shirts.
- 3D View: The T-shirt design is displayed in a 3D view, allowing users to see how it looks from different angles.
- OpenAI Integration: The website uses OpenAI to apply AI-generated patterns and logos based on user prompts.
- Save and Share: Users can save their T-shirt designs as a downloadable image.
- ThreeJS: A JavaScript library for creating 3D graphics in the browser.
- React Three Fiber: A React renderer for ThreeJS.
- TailwindCSS: A utility-first CSS framework for rapid UI development.
- Framer Motion: A library for creating animations in React.
- OpenAI: A platform for building and deploying AI models.
If you'd like to contribute to this project, please fork the repository and submit a pull request.