GSAP + GLTF T-Shirt Artwork Placement System

[Salman Razak]

I’m trying to build a drag-and-drop artwork placement system for a 3D T-shirt GLTF model using GSAP.

The goal is to upload an artwork as a PNG and place it directly on the T-shirt, similar to a product customization tool. The artwork should be:

• Dragged around the T-shirt
• Resized using corner handles
• Rotated
• Scaled proportionally
• Moved and adjusted interactively
• Ultimately mapped correctly onto the 3D T-shirt surface

The main problem I’m facing is that currently I need to create/upload a separate UV placement texture for every artwork I want to use. This is becoming confusing and inefficient.

I’m looking for a better approach where I can have one T-shirt GLTF model + its UV map, then dynamically place different PNG artworks on the model without creating a new UV texture for every design.

The ideal workflow would be similar to:

Upload PNG → Drag/Resize/Rotate on 2D T-shirt editor → Automatically project/map artwork onto the GLTF T-shirt → Real-time 3D preview.

I’d like to know the best architecture for this using Three.js + GLTF + GSAP, especially how to handle the artwork transformation and UV mapping dynamically.

See the Pen by portfolios (@portfolios) on CodePen.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I build this 3D effect in Three.js and GLTF?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.