Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/basedhound/3d-tshirts_app_react

Create your own style with this 3D Customization App. Pick colors, add logos, and try AI designs to make your virtual swag unique. Built using React.js, Three.js, and OpenAI.
https://github.com/basedhound/3d-tshirts_app_react

3d ai cloudinary dalle express framer-motion mongodb mongoose node nodejs openai openai-api r3f react three-drei three-fiber threejs vite

Last synced: 10 days ago
JSON representation

Create your own style with this 3D Customization App. Pick colors, add logos, and try AI designs to make your virtual swag unique. Built using React.js, Three.js, and OpenAI.

Awesome Lists containing this project

README 

        


    

      Project Banner

    

  
AI 3D T-Shirts





##  
 📋 Table of Contents



- ✨ [Introduction](#introduction)

- ⚙️ [Tech Stack](#tech-stack)

- 📝 [Features](#features)

- 🚀 [Quick Start](#quick-start)



##  
 ✨ Introduction



**[EN]** Create your own style with this 3D Customization App. Pick colors, add logos, and try AI designs to make your virtual swag unique. Built using React.js, Three.js, and OpenAI.



**[FR]** Créez votre propre style avec cette application de personnalisation 3D. Choisissez vos couleurs, ajoutez des logos et essayez des designs IA pour rendre votre style virtuel unique. Réalisée avec React.js, Three.js et OpenAI.



##  
 ⚙️ Tech Stack



- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. 



- [**MongoDB**](https://www.mongodb.com/docs/atlas/getting-started/) is a NoSQL database system known for its flexibility and scalability, ideal for handling large volumes of unstructured or semi-structured data. It stores data in JSON-like documents, making it easy to integrate with modern applications. MongoDB's features include powerful querying capabilities, automatic sharding for horizontal scaling, flexible data models, and support for distributed transactions in recent versions.



- [**Mongoose**](https://mongoosejs.com/docs/) is an Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a schema-based solution to model application data, ensuring data consistency and providing powerful tools for querying and validation. Mongoose simplifies the process of interacting with MongoDB by providing a higher abstraction layer.



- [**Three.js**](https://threejs.org/docs/) is a JavaScript library that enables the creation and display of 3D computer graphics in web browsers using WebGL. It provides extensive capabilities for rendering 3D scenes, including support for geometries, materials, lighting, and animations.



- [**Three Fiber**](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) is a React binding to Three.js, enabling declarative 3D rendering in the browser using React components. It simplifies the creation of complex 3D scenes and animations by providing a React-friendly API for Three.js functionalities.



- [**Three Drei**](https://github.com/pmndrs/drei) is a collection of useful helpers and components for React Three Fiber. It includes abstractions for common Three.js patterns, such as lights, controls, and effects, making it easier to build sophisticated 3D applications with React and Three.js.



- [**Framer Motion**](https://www.framer.com/motion/) is a React animation library designed for creating smooth, interactive animations and transitions. It simplifies complex animations with a straightforward API, supports gesture-based interactions, and offers physics-based animations for realistic motion effects.



- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.



- [**Vite**](https://vitejs.dev/guide/) is a modern build tool that focuses on fast development and optimized production builds. It serves as a lightning-fast frontend build tool that supports React, Vue, and TypeScript out of the box. Vite leverages native ES module imports to achieve instant hot module replacement (HMR) and fast cold starts.



- [**Node.js**](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) is a server-side JavaScript runtime built on Chrome's V8 JavaScript engine. It allows developers to build scalable and efficient network applications using JavaScript. Node.js is commonly used for building APIs and server-side applications.



- [**Express.js**](https://expressjs.com/) is a minimal and flexible Node.js web application framework that provides a robust set of features for building web and mobile applications. It simplifies the process of creating powerful APIs and web servers with middleware and routing.



- [**OpenAI API**](https://platform.openai.com/docs/api-reference/introduction) provides access to powerful artificial intelligence models developed by OpenAI. It allows developers to integrate cutting-edge natural language processing (NLP) capabilities, such as text generation and sentiment analysis, into their applications.



## 
 📝 Features



👉 **3D Swag Generation**: Generate unique 3D shirts/swag items dynamically.



👉 **Color Customization**: Apply any color to the 3D shirt/swag for personalized styling.



👉 **Logo Upload Functionality**: Enable users to upload any file as a logo, integrating it seamlessly onto the 3D shirt.



👉 **Texture Image Upload**: Allow users to upload texture images to style the 3D shirt.



👉 **AI-Generated Logo Integration**: Utilize AI to generate logos and intelligently apply them to the 3D shirt.



👉 **AI-Generated Textures**: Implement AI-generated textures for enhanced 3D shirt customization.



👉 **Download Options**:Dynamically change the application theme based on the selected color, enhancing user experience.



👉 **Theme Change with Color Selection**: Dynamically change the application theme based on the selected color, enhancing user experience.



👉 **Responsive 3D Application**: Ensure the application is responsive, delivering a seamless experience across various devices.



👉 **Framer Motion Animation**: Implement framer motion animations for smooth transitions between different 3D models.



## 
 🚀 Quick Start



Follow these steps to set up the project locally on your machine.




**Prerequisites**



Make sure you have the following installed on your machine:



- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)




**Cloning the Repository**



```bash

git clone {git remote URL}

```




**Installation**



Let's install the project dependencies, from your terminal, run:



```bash

npm install

# or

yarn install

```




**Set Up Environment Variables**



Create a new file named `.env` in the root of your project and add the following content:



```env

OPENAI_API_KEY=

```



Replace the placeholder values with your actual respective account credentials:



- [OpenAI](https://platform.openai.com)




**Running the Project**



Installation will take a minute or two, but once that's done, you should be able to run the following command:



```bash

npm run dev

# or

yarn dev

```



Open [`http://localhost:5173`](http://localhost:5173) in your browser to view the project.