Mesh Explosion Effect - React Three Fiber Tutorial
Vložit
- čas přidán 1. 07. 2024
- Let's learn how to explode 3D meshes with React Three Fiber, Three.js, and Blender Cell fracture addon
PS: It's easy 💥
Live demo
r3f-objects-explode.vercel.app/
Get the starter pack here 🔗
github.com/wass08/r3f-vite-st...
Final Code
github.com/wass08/r3f-objects...
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Awesome 3D models
poly.pizza/
Download Blender
www.blender.org/
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:35 - Project setup
01:01 - Blender Cell Fracture
03:33 - Loading the heart model
05:54 - Concept explanation
06:25 - Concept implementation
11:06 - Hiding original mesh
12:02 - Models copyright attribution
12:24 - I'm a banana
15:25 - Reusable useExplode hook
18:21 - Explosion rotation
19:25 - Final Result
19:42 - Love
▬▬▬▬▬▬ 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 - Věda a technologie
Wow you push my skills further yet again❤
😁 My pleasure 😍
Like always, great stuff!
Likee always, a huuuuge thank you 😍
excellent work as usual
Thanks a lot 😍
This tutorial exploded my mind 😂
This comment exploded my heart 💔
i like your creative style.. cheers
Thank you very much! 👨🎨
Cheers!
Please rate my acting skills 🤭
😂 seriously ok 6/10
@@javascriptcoder-pf9hh hahaha ok I'll continue coding and don't switch into movie acting 🤣
its a 5 for me🤣. Stick to coding please
Amazing 😮
Thank you! Cheers! 🙏
Thank you!
You're welcome, thanks to you! 😍
awesome!!!
😊✨
Thank you for all your tutorials. I'm a blender expert but a beginner in r3f. I would like you to make a video on how to use camera animations from blender in r3f.
Thank you! And me I'm not a blender expert at all, can you share a blender file with camera animations into the Discord? I'll have a look at it 🙌
@@WawaSensei Done. Its posted in the threejs-r3f section.
Real pretty, maybe making it more agressive with some light effects would make it look stunning
Thank you, you're right adding some lights with bloom would make it looks pretty good!
Encore but using glsl. This is a neat trick.
Hehe right! Well using glsl it would be pretty complicated to have "solidified" parts inside (maybe possible!)
man this is amazing, when are you going to release a full course haha
Thanks a lot 🔥
I'm working on it, I'll release the beta/text version next week 🙌
@@WawaSensei damn cannot wait, you are doing such a great job so far, so will be one of your first customers for sure!
men, you funny as hell men! that intro got me laughing every damm time!
Hahaha, glad you liked it 🤣😍
Thank you 🙌
Thats great u master Blender too
Thank you! Unfortunately I'm very far from mastering Blender.. I really am a beginner 🤭
@@WawaSensei Haha because of you live in Japan you become modest too.
@@jeremyh9841 hahaha honestly I'd love to master it, I plan to dedicate extra effort in learning it in depth 🙏
Can the fracturing be done inside three? The performance is just bad with a lot of separated objects
Maybe, it's really an experimental short project! Cutting the geometry might be doable through calculation (like the Blender tool is doing)
is there a way to make it work on mobile
Hey do you mean on a responsive website or on a mobile app? If responsive yes pretty easy, and if native app you can have a look at this video czcams.com/video/oCU5j5P20To/video.html
i'm a banana!!! hahah noticed just now this timestamp xD
🤭 haha glad some people still have the reference!
😂😂😂😂😂😂😂😂 what the hell was that intro for?
Hahahaha, wanted to have some fun!
twitter lolll
Hehehe good timing no? 🦜