React Three Fiber Tutorial: How to Apply Images to 3D Objects
Вставка
- Опубліковано 1 лип 2024
- 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 ✨
lessons.wawasensei.dev/course...
Starter pack 🔗
github.com/wass08/r3f-vite-st...
Final code 🔗
github.com/wass08/r3f-mug
#threejs #developer #reactjs
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Decal
github.com/pmndrs/drei#decal
HTML Canvas
www.w3schools.com/graphics/ca...
CanvasTexture
threejs.org/docs/#api/en/text...
Rabbit example
codesandbox.io/s/ymb5d9?file=...
Ring example
codesandbox.io/s/ring-decals-...
Mug3D example
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 :
www.wawasensei.dev - Наука та технологія
Sensei with the best tuts online again 🫡 project based, application based, critical thinking, practical, experiential, high level etc. Perfect as always.
🥰 That's a real pleasure to read! Thank you so much
I've been waiting for this for such a long time. You are the best. Fr
😍
Thanks a lot buddy, this video is exactly what i needed ! it solved a a lot of questions i had
My pleasure! 🙏
Awesome work bro you are the Best bro ❤❤
You are the best my friend 😍
Wow I love it
Happy to read it 🥰
Appreciate the video! The drei repo has the polyonOffset placement wrong. Thanks for showing me that it has to me on the material!
Thank youuu!!!
Oh you're right to mention it, I'll do a pull request to update it 🙏
Imagine a bag with an outer mesh whose z-position needs to be dynamically calculated based on changes to both its x and y positions, as well as alterations in scale. How can we determine the z-axis value in such a scenario?
amasing!
🙌
Excuse me,I have problem with decal in circle meshes I mean for example for sleeves on t-shirt image will be stretched
How can I solve that?
nice video. How would you manage "Layers" if you put 2 decals on top of each other to control which one is rendered on top? Thank you for your videos - best Web3d content I've found on the web so far!
Hey thank you very much, with the polygon offset and polygon offset factor you can easily define which one is on top of the other
Amazing tutorials! Keep up the great work Can you give me some more tips to achieve CanvasTexture solution? Much thanks.
Thank youuu! Sure, do you have precise points blocking you? If you need help you can ask questions or the Discord! Otherwise I add on my list of ideas to create a dedicated video 🙌
Thanks for this 🎉.
My texture image became blurry when using it on the 3d gltfxjsx model (i used a shirt instead of mug)
Welcome!
What's the format of your image? Don't hesitate to join the Discord to get help: lessons.wawasensei.dev/discord
super
🦸
how can i make this dynamic ? map through meshes instead of adding them static
Hum not sure to understand what you're trying to achieve?
I got blurry image when importing the texture, how can I get a sharp image...I'm using svg though
Hey, unfortunately the solution is to convert it into a png (or jpg). The material doesn't know how to render/scale your SVG properly as it's well supported by the browser but not by the texture/shader responsible of it.
Thank you@@WawaSensei
Rishi Sunak doing the coding ?? wow
Wait do you mean I look like him? 🤭
Wait do you mean I look like him? 🤭
@@WawaSensei no comment (may be) great tutorial by the way 🎉🎉
How to Apply 3D Objects to Images
🤣 you made my day! If you really expect an answer I'd say MidJourney and Dall-e can help 🤭