React Three Fiber tutorial - 3D animated Christmas Experience

Merry Christmas my friends, I prepared a 3d Christmas Experience using threejs! Wish you will like it!

In this tutorial we'll discover how to :
- animate our objects based on the scroll position
- use GSAP to create timeline animations
- display 3D text
- render multiple instances of skinned mesh models
- cursor customization
- mouse events
- post-processing (bloom, blur)

Link to the source code
https://github.com/wass08/r3f-christm...

Link to the final result
https://codesandbox.io/p/github/wass0...

Link to the source code
https://github.com/wass08/r3f-charact...

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei#readme

Create your React App in a minute with Vite
https://vitejs.dev/guide/

If you want to dive deeper into Three.js I highly recommend you to follow Bruno Simon complete tutorial named Three.js Journey.
https://threejs-journey.com/
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawa...

#threejs #react #development

===

Final result: (00:00)
Intro: (00:15)
Cursor customization: (00:52)
Facial expressions: (02:35)
3D Text: (03:47)
Scroll-based animations: (05:47)
Multiple skinned meshes: (11:19)
Post-processing effets: (12:01)
Sketching process: (15:17)
Conclusion: (16:19)

====

💻 The Discord Community
  / discord  

📸 Instagram :
  / wawa.sensei  

🎎 Facebook :
  / wawasenseiyt  

🐦Twitter :
  / wawasensei  

🐦TikTok :
  / wawasensei08  

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

🎨 The end screen artist (aka My friend) :
  / noemie_pulido