Boids Flocking Simulation with Three.js & React

Learn how to build an amazing Boids Flocking Simulation landing page with Three.js and React Three Fiber

🚀 Learn React Three Fiber with my complete course ✨
https://lessons.wawasensei.dev/course...

Kirzozz 👸
  / kirzozz  

Live demo 🏖️
https://r3f-boids-final.vercel.app/

Starter pack 🔗
https://github.com/wass08/r3f-boids-s...

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

#threejs #webdevelopment #reactthreefiber

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Convert fonts to Typeface
https://gero3.github.io/facetype.js/

Boids algorithm
https://www.red3d.com/cwr/boids/

React Three Fiber Examples
https://react-three-fiber.docs.pmnd.r...

GPGPU example
https://threejs.org/examples/?q=pgp#w...


▬▬▬▬▬▬ 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  


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00:00 Intro
00:00:44 Starter pack
00:01:51 Boundaries
00:05:19 Boids creation
00:09:27 Wandering
00:15:15 Limits
00:18:16 Small but fast!
00:20:10 Alignment
00:23:41 Separation
00:26:13 Cohesion
00:28:37 3 Dimensions
00:30:01 PostProcessing
00:33:30 Glassy Text
00:35:14 Going further
00:35:38 Thank you!