/TShirtDesign-ThreeJS

A tshirt design webapp built using ReactJS,ThreeJS and OpenAI's Dalle 2 Image Generator

Primary LanguageJavaScript

ThreeJS ThreeJS with OpenAI's DALL·E ThreeJS


Demonstration of the application   |    Features   |    Technologies used   |    Application installation


Application status : Developed ✔️


💻 Demonstration of the application

1. Overview

overview-min


2. Pick any color palette

color_picker-min


3. Upload your desired image

image_upload-min


4. Apply the image for either the logo, the whole shirt or both

image_toggle-min


5. Generate image using OpenAI's DALLE 2 ( EXPIRED )

ai_upload


📓 About

A responsive t-shirt designing website with an interactive 3D Model using:

  • ReactJS - a popular front-end library that has gradually become the go-to framework for modern web development
  • 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
  • Tailwind CSS - a popular utility-first CSS styling framework
  • Framer Motion - the most popular library used to bring your React website to life with animations
  • Dalle·E 2 - OpenAI's ai system to create realistic images and art from a description in natural language

⭐ Features

  • Color Picker.
  • Image Upload for both logo and full canvas.
  • Image Generation using OpenAI's DALL·E 2.

🔑 Take a look

https://dalle-ai-threejs.netlify.app/

🚀 Technologies used:

reactjs  threejs  vite  openai-dalle  framer  tailwind


ℹ️ Application installation

  • git clone https://github.com/ChammounC/TShirtDesign-ThreeJS.git to clone the repository

server-side

OPENAI_API_KEY = <GENERATED_API_KEY_FROM_ABOVE_STEP>
ALLOWED_ORIGIN = <CLIENT_URL> // eg.http://localhost:3000/
  • run npm start

client-side

  • cd client and run npm install
  • create a .env file in the root of client folder and add variable:
VITE_URL = http://localhost:8080/api/v1/dalle
  • run npm run dev