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.

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

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

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

HTML Canvas
https://www.w3schools.com/graphics/canvas_intro.asp

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

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

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

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