Build a 3D Book Slider Landing Page with Three.js & React

Published: 27 July 2024
on channel: Wawa Sensei
16,144
770

Learn how to build an amazing 3D Book Slider landing page with Three.js and React Three Fiber

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

Live demo 🏖️
https://r3f-animated-book-slider-fina...

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

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

#threejs #webdevelopment #reactthreefiber

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

Squoosh Texture compression
https://squoosh.app/

Box Geometry
https://threejs.org/docs/#api/en/geom...

Skinned Mesh
https://threejs.org/docs/?q=skinn#api...

GraphToy
https://graphtoy.com/


▬▬▬▬▬▬ 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 - Intro
01:00 - Starter pack
02:03 - Book
05:30 - BoxGeometry
08:11 - SkinnedMesh
17:44 - Textures
20:55 - Initial state
22:22 - Page transitions
32:44 - Fold animation
36:50 - Delay between pages
38:57 - PointerEvents
41:35 - Final touch
43:02 - Thank you!


Watch video Build a 3D Book Slider Landing Page with Three.js & React online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 27 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16,144 once and liked it 770 people.