<<<<<<< HEAD
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.
-
Link to youtube tutorial by JavaScript Mastery ======= ThreeJs-Project
Many large corporations already use 3D graphics to showcase their products. Here is a repo that helps you to understand how to use threejs and to build your own ThreeJS 3D product website and infuse it with the power of artificial intelligence!
Libraries Used
- ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
- React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
- TailwindCSS - a popular utility-first CSS styling framework
- Framer Motion - the most popular library used to bring your React website to life with animations
You'll also learn how to:
- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
- Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
- Add custom color and file support.
- Generate and use images through DALLE AI
- Download the resulting t-shirt model image
- Ensure responsiveness across all devices and improve your site's performance
4d6fb1ddd87618deb14f3f18328918530ccfd088