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

Published: 03 November 2023
on channel: Wawa Sensei

7,785

229

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

Watch video React Three Fiber Tutorial: How to Apply Images to 3D Objects online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 03 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,785 once and liked it 229 people.

692