# How does redbubble do their tshirt mockups? the design follows the folds of the tshirt

**URL:** <https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859>\
**Category:** Questions\
**Tags:** textures\
**Created:** [August 11, 2023, 5:00am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859 "2023-08-11T05:00:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![goldenjayr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/goldenjayr/32/17316_2.png) [@goldenjayr](https://discourse.threejs.org/u/goldenjayr)\
**Post date:** [August 11, 2023, 5:00am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/1 "2023-08-11T05:00:47Z")

</div>

![ssrco,classic_tee,womens,101010_01c5ca27c6,front_alt,tall_three_quarter,750x1000](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b1fc94cb70f9094cb262c8c49105905806873e9.jpeg)

The product is this: [https://www.redbubble.com/i/t-shirt/Instinct-vs-Ego-by-Geekdom101/142269246.IJ6L0](https://www.redbubble.com/i/t-shirt/Instinct-vs-Ego-by-Geekdom101/142269246.IJ6L0)

I think they did it on the server but I am perplexed on how they were able to do it. I have not found any tutorial online that satisfy this kind of requirement. Might be threejs but what are the steps in doing this. Thank you

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [August 11, 2023, 9:42am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/2 "2023-08-11T09:42:18Z")

</div>

It can be done in threejs and it will be much cooler because the customers will be able to orbit around the models

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 11, 2023, 9:48am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/3 "2023-08-11T09:48:51Z")

</div>

decals. a decal projects an image onto any geometry.

> **[T-Shirt configurator - CodeSandbox](https://codesandbox.io/s/ioxywi)**
>
> T-Shirt configurator by drcmda using @pmndrs/branding, @react-three/drei, @react-three/fiber, @types/three, framer-motion, maath, react, react-colorful, react-dom

if you click canvas.js that’s all there is to it, the rest is just the UI and state model.

anderson mancini and i made a full course about it in case it interests you [https://www.udemy.com/course/react-three-fiber-configurator/](https://www.udemy.com/course/react-three-fiber-configurator/)

---

<div class="post-metadata">

**Author:** ![goldenjayr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/goldenjayr/32/17316_2.png) [@goldenjayr](https://discourse.threejs.org/u/goldenjayr)\
**Post date:** [August 11, 2023, 10:03am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/4 "2023-08-11T10:03:03Z")

</div>

I guess what a really want is a realistic mockup with a real human being model with it. Thank you guys for your replies… 🙂

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 11, 2023, 10:05am UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/5 "2023-08-11T10:05:19Z")

</div>

it would be the same, doesn’t matter what the shape is

> **[Iridescent decals - CodeSandbox](https://codesandbox.io/s/iridescent-decals-qvb1vk)**
>
> Iridescent decals by drcmda using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![TheFwoS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thefwos/32/51840_2.png) [@TheFwoS](https://discourse.threejs.org/u/TheFwoS)\
**Post date:** [September 16, 2024, 9:46pm UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/6 "2024-09-16T21:46:38Z")

</div>

You can easily do this with [https://dynamicmockups.com](https://dynamicmockups.com)

They have a pretty simple but powerful API where they allow you to use your own custom Photoshop Mockups.

---

<div class="post-metadata">

**Author:** ![Moolk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/moolk/32/55773_2.png) [@Moolk](https://discourse.threejs.org/u/Moolk)\
**Post date:** [January 17, 2025, 11:28pm UTC](https://discourse.threejs.org/t/how-does-redbubble-do-their-tshirt-mockups-the-design-follows-the-folds-of-the-tshirt/54859/7 "2025-01-17T23:28:40Z")

</div>

Redbubble use ImageMagick composites of multiple layers (base, artwork & overlay) for simple flat mockups.

For more complex mockups like above as well as mugs, shower curtains, Throw Pillows etc, they use a custom Service created with Blender to map the artwork on to a 3D model, then use the same ImageMagick process as above.