- Published on
ThreeJS Customizable Shirt
- Authors
- Name
- Shaheer Mansoor
- @Twitter/ShaheerMansoor2
Title: ThreeJS Customizable Shirt
Author: Shaheer Mansoor
Subject: 3D Web World
Language: English
Live Preview: Visit Live Website
Source Code: Github Repository
Table of Contents
Introduction
I sat down asked myself of creating a small exciting project using WebGL powered technologies. I decided to create a 3D customizable shirt using ThreeJS and ReactJS. Created a 3D model of a shirt using Blender and imported it into ThreeJS.
Tech Stack
- ReactJS using Vite
- @react-three/drei - Fully functional, ready-made abstractions for
@react-three/fiber. - @react-three/fiber - It is a React renderer for three.js.
- framer-motion - An open source motion library for React, made by Framer.
- maath - This is a collection of useful math helpers, random generators, bits and bobs. The library is mostly meant to be used with three.js.
- react-color - for color wheel picker.
- three - three for, you guessed it ThreeJS.
- valtio - for state management.
Color Wheel
Color Wheel - Allows users to change color of the shirt by a color wheel.
Logo / Texture
File Upload - User can upload image file and then can set the image as a Logo on shirt or Full Texture.
Logo / Texture Toggle
Simple toggle buttons for user to toggle on/off between logo and texture.
Download .png Shirt
After customizing shirt according to your liking, you can hit download button to save png file of shirt.
Future Updates
I will be adding saving shirt design by storing them in localstorage. Also adding AI chat prompt for generating designs for shirt.
Thank you so much for reading <3 and Enjoy playing with it.