How to Build a 3D Slideshow with React Three Fiber
Vložit
- čas přidán 1. 07. 2024
- 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 👉 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 🔗
github.com/wass08/r3f-3D-slid...
#threejs #r3f #slideshow
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Learn React Three Fiber with my complete course
lessons.wawasensei.dev/course...
CameraControls
github.com/pmndrs/drei#camera...
github.com/yomotsu/camera-con...
RenderTexture
github.com/pmndrs/drei#render...
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
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 :
www.wawasensei.dev - Věda a technologie
Thank you very much !! Most of your tutorials fit perfectly what I've been looking for a long time ! Bravo !!!
Thankyouuu! You still make the best R3F tutorials available 💯🙏
I appreciate that, thanks a lot, that's very motivating!
Very nice video and project! Useful, clear and perfectly clean.🔥🔥
Your video is always very good for learning different ways to use three.js 👌Thx for this !
🙏 very happy that you appreciate it! Thanks ☺️
this is crazy brilliant, thank you great teacher!!!
You're very welcome! ❤️
Love this video format. But honestly I prefer the live coding also because I learn better working with the process. Was about to ask if there's one for this tutorial
Always refer to one of your videos whenever I wanna build a new project. Sensei of R3F hands down. Thank you sir
My pelasure, thank you!
Cheers, Yep love the style of explaining the code, methods and the why, rather than live code. Hope your Holiday is awesome! Surely you deserve it.
So happy to read it, I took so much more fun with this video as I could focus on the project more than the steps to reproduce it during the recording session
Thank you very much 🙏
You are already a r3f legend
😍 thank youuu, hope I will build more and more good projects!
splendid, now I put it into practice
Thank you! Yes, that opens a lot of creative possibilities, don't hesitate to share if you build nice things 🤩
this is so good. thanks wawa
My pleasure buddy 🙌
Best tutorial for 3d slider
🚀
damn bro, thanks for free lesson, love it. Keep doing
😍 you're welcome, love doing it with such an amazing community! Thank you
I loooooove so much your channel, am just begining to learn blender but sooon I will make all of your tutorials, thanks for all, have a great vacations! and sorry my english
Thank you so much! Have a great learning journey with Blender and R3F 🙌 I also plan to improve my blender skills in the near future
This one looks cool ❤
🙏🙏🙏
Excellent !
💪
Awesome work bro you are the Best ❤
You are the best! Thanks a lot for your support every time 🙌
@@WawaSensei i love bro
Very nice, I like the way you teach and the designs are very beautiful 🔥
Thanks you so much! 🙏
awesome
😍
i love your content!
😍 thank you so much!
beautyfull 👍
🙌 thank youuu
Woohhh… Creativity 💯…
please make one minimal yet interactive & creative game / puzzle…
Thank you! What do you think about an 3d escape room like game?
@@WawaSensei escape room can be a good idea.
I do have two ideas / suggestions :
1st, what about something like racing but with a web socket? I mean, random people can join the party and race. just imagine… small cute cars, one small loop with small buildings and trees, or 2-3 levels...
2nd, recreate some good level of Awwwards sites or functionality on live or make a playlist.. like, for example, the nextjs conf site has minimal yet creative puzzle and then Bruno Simon’s portfolio or anything( not necessarily three-js-based).
it seems a little bit overwhelming i don't know will i learn threejs or not. Today was my first day learning threejs. I feel overwhelmed. Thank you bro for your top videos
Thank you! Take your time, it’s a fascinating world, a lot to discover, just don’t put too much pressure on yourself 🙌
Thank you so much for sharing your golden time with us. I am having difficulty on animating the text and any mesh opacity as user Scrolls. What hook should I use to make it gradually disappear and zoom out and zoom in base on scroll. Please can you help me with this. ❤
Thank you!
In this tutorial I make something like this, maybe it will help you 👉 czcams.com/video/8r8rzp8t2aM/video.htmlsi=bxvV6MyQib4V2elD
Awesome work Wawa Sensei and thank you for the tutorial. Is that 'TESLA' word above an SVG image or text? How did it get there?
Thank youu!
This is the SVG you can see in the Overlay component here 👉 github.com/wass08/r3f-3d-slideshow/blob/main/src/components/Overlay.jsx
(got it from Tesla official site)
Awesome content as always! One question though: Why does both the CameraControls and the OrbitControls overtake the scroll on mobile? I have a scene that stretches to the entire screen, and I want the user to be able to scroll down. Based on the scroll, I want to move the camera around. It all works on desktop, but on mobile, I'm not able to scroll. I disabled the zoom, pan and rotation, and still it seems like the CameraControls is overtaking the scroll abbility. Nobody seems to be able to tell me how to fix this and still allow the user to scroll. Do you have any idea?
Huge thanks and keep up the good work!
Thank you very much! About your question, can you share a code sandbox so I can have a look and share with you a simple way to do it?
crazy one.
Can i get the starter one?
Thank you! There's not really a "starter" for this project, I went from the boilerplate r3f project github.com/wass08/r3f-vite-starter to the final one 🙌
This is cool please can you show how to add joystick in a project
Thank you! I will do in the future 🙌
Ouiiiiiiiiiiiiiiii good job. Tu comptes submit tes projets un jour sur Awwwards ou FWA pour faire connaître ton travail ?
Merciiii ! Très bonne idée, faudrait que je fasse un projet exprès pour Awwwards et une vidéo dédiée 🙌
What's the board app you used during the theory part?
Excalidraw excalidraw.com/ 🗡️
extremely laggy