misnet / reactjs-threejs-tshirt-designing-app

This is a ThreeJS & ReactJS TShirt designing App

React Three.js T-Shirt Designer

This project is a React application that allows users to design their own t-shirts by picking colors, uploading logos, and generating AI images using DALEE based on user input prompts.

Table of Contents

• React Three.js T-Shirt Designer
  • Table of Contents
  • Introduction
  • Features
  • Installation
  • Usage
  • Dependencies
  • Configuration
  • Contributing
  • License

Introduction

The React Three.js T-Shirt Designer is a web application that provides a user-friendly interface for designing custom t-shirts. It leverages the power of React.js and Three.js to create an interactive 3D environment where users can customize their t-shirts with different colors and logos.

Features

• Color selection: Users can choose from a wide range of colors for the t-shirt.
• Logo upload: Users can upload their own logos or choose from a library of pre-defined logos.
• AI image generation: The application uses DALEE (Deep Artificial Evolutionary Learning Engine) to generate AI images based on user input prompts.
• Real-time preview: Users can see a real-time preview of their customized t-shirt as they make changes.
• Save and share: Users can save and share their designs with others.

Installation

To run the React Three.js T-Shirt Designer locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/jareerzeenam/reactjs-threejs-tshirt-designing-app.git
   

2. Navigate to the project directory:

   cd reactjs-threejs-tshirt-designing-app
   

3. Install the dependencies for both the client and server:

   npm run install
   

4. Create a .env file in the root directory under server folder and add your OpenAI API key:

   OPENAI_API_KEY=your_openai_api_key
   

   You can obtain your OpenAI API key from https://platform.openai.com/account/api-keys.

5. Start both the client and server:

   npm run dev
   

6. Open your web browser and visit http://localhost:3000 to access the application.

Usage

1. Select a t-shirt color: Use the color picker or select from the available color options to choose the base color for your t-shirt.

2. Upload a logo: Click on the "Upload Logo" button to upload your own logo image file or choose from the library of pre-defined logos.

3. Customize AI image: Fill in the input prompts for DALEE to generate an AI image based on your preferences. You can experiment with different prompts to get unique designs.

4. Preview and adjust: As you make changes to the t-shirt color, logo, or AI image, the real-time preview will update accordingly. Use this preview to visualize your design.

5. Save and share: Once you're satisfied with your design, you can save it and share it with others. Use the provided options to save the design as an image file or generate a shareable link.

Dependencies

The React Three.js T-Shirt Designer project relies on the following dependencies:

• React.js: JavaScript library for building user interfaces.
• Three.js: JavaScript 3D library for creating and displaying animated 3D computer graphics.
• DALEE: Deep Artificial Evolutionary Learning Engine for generating AI images.
• react-color: A collection of color pickers for React.

For a complete list of dependencies and their versions, please refer to the package.json file in the project repository.

Configuration

To use the OpenAI API for AI image generation, you need to provide your API key in the .env file as mentioned in the installation steps.

Contributing

Contributions to this project are welcome! If you have any ideas or suggestions, please open an issue or submit a pull request. Make sure to follow the existing coding style and commit message conventions.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this project as per the terms of the license. See the LICENSE file for more information.