/threejs

Web app with real-time customization of a shirt model with color, logos, and AI-generated imagery

Primary LanguageJavaScript

🎨 Custom Shirt 3D Model Showcase

This web application showcases a 3D model of a shirt created using Three.js, Framer Motion, and DALL·E AI API.

Acknowledgment

This project is based on a tutorial by JavaScriptMastery. You can find the original tutorial on this link.

🎥 Demo

Demo Wide Demo Mobile

🌟 Features

  • Interactive 3D Shirt Model: Explore a high-quality 3D representation of a shirt that rotates based on the cursor position.

  • Color Customization: Transform the shirt's appearance by changing its color. Experiment with different hues to match your style and preferences.

  • Logo Placement: Add a personal touch to your shirt by uploading your own logo or image. Toggle the logo on and off as needed.

  • File Upload: Upload an image as a logo or to cover the entire shirt as a decal. Both can be toggled on and off

  • AI Image Generation: OpenAI's DALL·E integration allows generating a unique image be used as a logo or full shirt decal by inserting a text prompt.

🚀 Technologies Used

  • Frontend: React, Three.js, Framer Motion, Valtio, Tailwind CSS.

  • Backend: Node.js, Express.js, OpenAI DALL·E API