How to Build a 3D Slideshow with React Three Fiber

Welcome to the Wawa Lab, together, we will learn how to build a 3D Slideshow between 3D scenes using Three.js with React Three Fiber

View the final version here 👉 https://r3f-3d-slideshow.vercel.app/

In this video we will discover how to use CameraControls to animate the camera smoothly and RenderTexture component to render 3D scenes and use them as textures.

Get the final project here 🔗
https://github.com/wass08/r3f-3D-slid...

#threejs #r3f #slideshow

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

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

CameraControls
https://github.com/pmndrs/drei#camera...
https://github.com/yomotsu/camera-con...

RenderTexture
https://github.com/pmndrs/drei#render...

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

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

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

00:00 - Intro
01:09 - 3D scenes
02:27 - Theory
05:15 - RenderTexture
09:39 - CameraControls
14:21 - HTML Overlay
17:04 - Responsive
20:00 - Mobile result
20:24 - 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 :
https://www.wawasensei.dev