React Three Fiber Tutorial: How to Apply Images to 3D Objects

Let's learn how to create personalized 3D products such as mugs, t-shirts, bags, or any complex 3D shape by applying image textures.

In this tutorial, we will discover the Decal component from React Three Fiber. Another solution presented is to use CanvasTexture to create a custom texture to apply to the material.

🚀 Learn React Three Fiber with my complete course ✨
https://lessons.wawasensei.dev/course...

Starter pack 🔗
https://github.com/wass08/r3f-vite-st...

Final code 🔗
https://github.com/wass08/r3f-mug

#threejs #developer #reactjs

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Decal
https://github.com/pmndrs/drei#decal

HTML Canvas
https://www.w3schools.com/graphics/ca...

CanvasTexture
https://threejs.org/docs/#api/en/text...

Rabbit example
https://codesandbox.io/s/ymb5d9?file=...

Ring example
https://codesandbox.io/s/ring-decals-...

Mug3D example
https://mug3d.com/?model=1

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:29 - Project setup
01:03 - Concept
02:56 - Decal
07:38 - Preparing object on Blender
12:31 - Applying on 3D object
15:38 - Dynamic configurator
24:46 - Final result
25:01 - Thank you!

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
   / @wawasensei  

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord  

📸 Instagram :
  / wawa.sensei  

🎎 Facebook :
  / wawasenseiyt  

🐦Twitter :
  / wawasensei  

🐦TikTok :
  / wawasensei08  

💻 My website :
https://www.wawasensei.dev