KZhead
Ғылым және технология

I wish I knew this before using React Three Fiber

Rabbit Hole Syndrome
2024 ж. 22 Мам.
111 300 Рет қаралды
Жүктеу

Sometimes the best way to understand a library like React Three Fiber is to compare it to the original 3D web library, Three.js. We’re going to walk through a side-by-side, one-to-one build of a Three.js project and a React Three Fiber project at the same time. After watching this video you will understand:
- Scene creation (cameras, renderers, meshes, animation)
- R3F JSX syntax and special props
- Componentization
- Rendering tricks
The goal is for you to learn exactly how everything works under the hood so that you can be confident building your next React Three Fiber project.
Source code is available at:
github.com/rabbit-hole-syndro...
00:00 Why?
00:33 Agenda
00:59 Create our scene in Three.js
5:29 Understand the same scene in React Three Fiber
9:18 How JSX works
17:53 Componentizing
18:41 Animation
19:54 Refs in React Three Fiber
21:05 Disposing
21:58 Add lights
22:33 Rendering appearance
24:18 Add color
25:17 Position vectors as array triplets
28:03 Thanks for watching!

Пікірлер

  • This is a lovely introduction! I love that you compared the two libaries side by side. Your explanations are concise and effective. Thank you!

    @TheInuyashaGuy@TheInuyashaGuy20 күн бұрын

  • Incredibly helpful, can't wait to learn more from these under-the-hood videos you make.

    @Cloud9er@Cloud9er Жыл бұрын

  • This is an absolutely awesome overview. Your explanations are crystal clear, despite me not having used Three in about a year.

    @user-bv4xr3yd8w@user-bv4xr3yd8w7 ай бұрын

  • I am glad that there are people like you, who can help beginner streamers. Thank you brother, I appreciate your support. Always fresh updates

    @alamin-yu9mm@alamin-yu9mm Жыл бұрын

  • This channel gonna blow up. Thanks, man. Keep up the quality content.

    @mobeen360@mobeen360 Жыл бұрын

  • Hey, this is absolutely fantastic. As someone who has avoided video explanations and would rather dive and hack in the source code for the longest time, this type of quality content is what developers should strive for. Not the forgettable and template-y one-size-fits-all setup, but a deep dive into the limits of the code, render cycle, performance, and the mindset of the authors of both libraries and what they were attempting to accomplish. I wouldn't mind it to be longer. This channel might be the Jon Gjengset of frontend if you keep it up!

    @shiftstage7892@shiftstage7892 Жыл бұрын

  • Great documentation! Seeing the vanilla and react js side by side helps a ton

    @Tyler-zb6ec@Tyler-zb6ec Жыл бұрын

  • I'm half way into this video, Im just going to say "this is channel is my hidden gem". You have 10/10 explanation style. So easy to understand.

    @ooogabooga5111@ooogabooga5111 Жыл бұрын

  • Great video! Showing different ways to achieve the same things in react-three-fiber was very helpful for my understanding! And thanks for digging into the renderer code and figuring out what was happening! The explanation was really helpful! ps. Nice to see someone not using the * as THREE default import for once. Your code looks so much nicer! pps. subscribed!

    @jx4172@jx4172 Жыл бұрын

  • incredible, been pretty deep on vanilla three for a long time, been looking at cool stuff done with r3f and i love how quickly it looks like you can develop without a lot of boilerplate, but needed someone to bridge me between the two in exactly this way. this helps so so so much, thanks again

    @aj35lightning@aj35lightning Жыл бұрын

    • I'm happy this helped you out! 🙂

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • R3F seems simple and concise. Thank you for the explanation

    @neneodonkor@neneodonkor7 ай бұрын

  • this is such a great find on youtube, sir Bruno Simon's videos are gems also but most of the people are into functional components now so this is a good balancer, though the approach of sir Bruno is very great specially with the simpleton which is sir Andrew Woan also uses. Such great channels for ThreeJS enthusiasts. Keep making more of this please

    @dalyryl@dalyryl11 ай бұрын

  • One of the best videos I've watched ever on animation, information, presentation and सरल

    @dvikauglaumishrauca@dvikauglaumishrauca3 ай бұрын

  • I love that you go into the details. This is explanation, not just demonstration. Thank you for the video!

    @kovacsfulop8275@kovacsfulop8275 Жыл бұрын

    • Glad it helped! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • This video really enlighten me. And the way your teaching and the organization of the video is profession. I really hope to see more about three.js and react three fiber video .Keep producing! It's great!

    @simon3527@simon3527 Жыл бұрын

    • Thanks for the feedback! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • I expected to look at your channel and see tons of videos only to realize this was just uploaded!! This was incredibly well done. Thank you so much for this it really helped me understand how the two work together. Looking forward to more content!

    @dylanking165@dylanking165 Жыл бұрын

    • Thanks for the kind feedback 😀. Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

    • @@RabbitHoleSyndrome No problem! If you're looking for another video idea, I'd love one about how to get an emissive material to actually shine light onto surrounding objects - can't seem to get it to work.

      @dylanking165@dylanking165 Жыл бұрын

    • specifically with a which I understand might not be possible. I can do it in blender so I know it's ~possible~ but it might not be an option in R3F

      @dylanking165@dylanking165 Жыл бұрын

  • By far one of the best online dev tutorials I've ever seen! Seriously - great work.

    @mananshah3248@mananshah3248 Жыл бұрын

    • Really appreciate it, thanks!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • My man! This is incredible. Like Tony, you were a MASSIVE factor in my development as a full stack. Your mentorship was invaluable. Looking forward to seeing more!

    @SkyFortressDamocles@SkyFortressDamocles Жыл бұрын

    • Thank you Bryce!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • I'm so grateful for you taking your time to spread this knowledge! Thank you so much, hope for more videos on React Three Fiber! 😁 Love from Brazil!

    @LuisFelipe-td8qk@LuisFelipe-td8qk Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Thank you so much for this video. A solid explanation on all of these concepts is an absolute godsent.

    @ferrazf9@ferrazf92 ай бұрын

  • this is great, I looked all around for it. Thank you very much!

    @omelhorcanaldemodsparamine8231@omelhorcanaldemodsparamine8231 Жыл бұрын

  • This content quality is insane Please keep going!!

    @goshballs@goshballs Жыл бұрын

  • I think this is the best development tutorial ive ever seen. The structure of the video and depth you go into is something no other channel seems to do! Cant wait to see more videos! 🙌🏻

    @milesrae2950@milesrae2950 Жыл бұрын

    • Thanks for the great feedback Miles!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great video, good luck with your KZhead channel! ✌️

    @threeveloper@threeveloper Жыл бұрын

    • Thanks, I appreciate it!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great vid, high quality and organization of the material is on point 👌

    @austinj367@austinj367 Жыл бұрын

  • I am not a React nor a React Fiber user, but this comparison is an absolut insight! - Thank you for that! Subscribed!

    @RobertWildling@RobertWildling7 ай бұрын

  • Excellent!!! Your video cleared up all confusion I had when implementing Three.js into React apps with React Three Fiber. Saved me hours of reading through documentation. Thanks so much and keep doing what you do!

    @craigkaufman5108@craigkaufman5108 Жыл бұрын

    • Great to hear, thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • This it by far the best tutorial for someone to start their three.js/R3F journey. Godd job man!

    @userrrfriendly1908@userrrfriendly1908 Жыл бұрын

    • Thanks, glad it helped!!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Really excellent demonstration!! Thanks so much for creating this video and sharing it with us.

    @ewwitsantonio@ewwitsantonio11 ай бұрын

    • You bet! Thanks for watching 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome11 ай бұрын

  • Genuinely the video I needed to get me started at ThreeJS. I have not been able to wrap my head around this library for the years I have wanted to try it. Thanks a lot 😄

    @jobhatti@jobhatti Жыл бұрын

    • Awesome, glad it helped! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great video man. this was something i struggled with for months to understand when I started working in R3F. great explanation. wish I would have had this video last year when I started.

    @alazyartist@alazyartist Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • great video. looking forward to watching more of your tutorials. nice side by side. and glad you keep going deeper

    @TheKeyToMusicOfficial@TheKeyToMusicOfficial Жыл бұрын

    • Thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • I like your idea of deep diving everything. I'm hoping that you're making more videos!

    @jaysistar2711@jaysistar2711 Жыл бұрын

    • Thanks!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Incredible Video! Your amazing for creating this!

    @BrightSideDeveloper@BrightSideDeveloper Жыл бұрын

  • the side by side is perfect for my learning style. thank you so much

    @imasdance4784@imasdance4784 Жыл бұрын

    • Thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great Explanation! Thanks for this video

    @Manny-mc3rx@Manny-mc3rx3 ай бұрын

  • Great video, I am intermediate at React and i wanted to just hop into r3f, but a lot of the abstractions got me confused between the documentation between threejs and r3f. This video helped a lot man

    @idcemail123@idcemail123 Жыл бұрын

    • Glad this helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • really good wish I had this one year ago, bumped into much of these issue you are addressing.

    @RRits57@RRits57 Жыл бұрын

  • Thanks for the video, it's really great and opened up my mind. I started with React Three Fiber but needed to have more control over the general parameters of my scene, like toneMapping and colorSpace, so I took some "vanilla" ThreeJS courses. Now I'm moving back to React Three Fiber. Thanks to you, now I am clear about the "attach" property and the whole logic behind React Three Fiber. You're awesome man. Your explanations are pretty clear and straightforward. 👍

    @josegkurszewski8363@josegkurszewski8363 Жыл бұрын

    • Thank you, really glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Excellent! Please keep posting other videos about R3F if you feel like to! :)

    @marcoaccardi@marcoaccardi Жыл бұрын

  • Thank you. This video helps me a lot, who knows nothing about React, while I'm following Bruno Simon's new lessons on React Three Fiber in his Threejs Journey course. Looking forward to watching new tutorials like this and learn from you.

    @jizhang2407@jizhang2407 Жыл бұрын

    • Thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • subscribed, would love to see all of the videos you've got lined up for the future

    @stanleychukwu7424@stanleychukwu7424 Жыл бұрын

    • Thanks for the sub!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • The video is more than helpful to give us a basic understanding on how React Three Fiber works, thank you for the good work sir, subscribed!

    @louielee3583@louielee3583 Жыл бұрын

    • You're very welcome, thanks for the sub!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • This video is amazing. Where I get lost translating between fiber and threejs. This helped a bunch. This video could be much much longer and I’d watch. Pretty please do a video on Spring in Fiber!

    @elissitdesign@elissitdesign Жыл бұрын

  • Subbed! I'm learning three js/fiber/webgi keep the videos coming.

    @hauvert_@hauvert_11 ай бұрын

  • Great video! Subscribed! Looking forward to more content!

    @ryanritten1977@ryanritten1977 Жыл бұрын

    • Thanks Ryan!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • what an amazing explanation video keep it up you deserve more views

    @MD-vc7oh@MD-vc7oh Жыл бұрын

  • extremely helpful to have - thank you for breaking down the concepts to better understand three/fiber

    @kwongster@kwongster9 ай бұрын

    • You bet!

      @RabbitHoleSyndrome@RabbitHoleSyndrome9 ай бұрын

  • loved it. never touched 3js, but you're making me wanna try.

    @zeenuexe8362@zeenuexe836211 ай бұрын

    • Happy to help!

      @RabbitHoleSyndrome@RabbitHoleSyndrome11 ай бұрын

  • BROO this is exactly what I was looking for!

    @ghiasyalexandre3546@ghiasyalexandre3546 Жыл бұрын

  • Love this man, keep the videos coming

    @ecaIos@ecaIos Жыл бұрын

  • Finally content we all are lookig for!

    @gubatenkov@gubatenkov Жыл бұрын

  • Wow, this is by far the best explanation/introduction into react/fiber and three.js! I completely see why people would use fiber now. Thanks!

    @dalvandi@dalvandi Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Holy.... wow. Ran into all those issues learning Fiber coming from three and knowing React... thank you so much. I was most torn up about the defaults changing... after this, I never understood the jsx components and how they worked. Thank you.

    @xorlop@xorlop Жыл бұрын

    • Glad it helped! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Awesome video! Really helped me to understand the relationship between react-three/fiber and three ❤

    @dalhaan@dalhaan Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • this not fair at all man you make this awsome and that's it !!! keep up the good content

    @Ta9i@Ta9i Жыл бұрын

  • This is the video I was looking for all along, took me a while to get the right keywords on the KZhead search field to finally get to this point.

    @kozmicluis2552@kozmicluis2552 Жыл бұрын

    • Glad it helped! Curious which search terms worked & didn't work for you?

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Very good material, thank you!

    @AlexandreRangel@AlexandreRangel Жыл бұрын

  • Amazing video, good to see something more fundamental than other more pratical, hands-on tutorials out here.

    @gekkenhuis4863@gekkenhuis4863 Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • The tutorial is really helpful, thank you. I'm looking forward to see more of three fiber tutorials from you. Would be nice to see tutorial on ARCanvas as well.

    @sikfreeze@sikfreeze Жыл бұрын

    • I’m glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Wow, the video and the explanation was awesome!!! THANKS 👍We wish to see more tutorials in your channel!

    @farzanehsefidabi5957@farzanehsefidabi5957 Жыл бұрын

    • Thanks for the feedback! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Wow I was waiting to see this comparison and I have found it , Thank you man 👍👍You have a new subscriber, good content, hope you can make more and share

    Жыл бұрын

    • Glad it helped and thanks for the sub!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • thanks coming from react, three js it was going a bit over my head and this differences will be really helpful for me.... I have saved this video so that I can refer to it whenever I will be stuck...

    @VMNthemaster@VMNthemaster Жыл бұрын

  • Superb tutorial, really helped me to understand rtf

    @nikhilpsathyanathan@nikhilpsathyanathan Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great video at the perfect time. I just started moving my three.js project from vanilla js to react, literally yesterday. I was searching for a good resource on r3f vs three.js and didn't find much, then this video suddenly pops up in my feed.

    @stingray2107@stingray2107 Жыл бұрын

    • Glad this was helpful!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

    • @@RabbitHoleSyndrome I followed your instructions and made some great progress, thanks so much, this video is truely an amazing resource.

      @stingray2107@stingray2107 Жыл бұрын

  • Thank you for this excelent video. Very helpful 👍

    @Fleischegutt@Fleischegutt Жыл бұрын

  • My first time seeing a video from this channel! Very engaging content. Subbed 5 mins in

    @tech3425@tech3425 Жыл бұрын

    • Awesome, thanks for the sub!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • awesome, thanks. Greeting from Colombia

    @andresdiazlopez5365@andresdiazlopez5365 Жыл бұрын

  • I actually learned something from this video -- very well done.

    @fordoxaal3291@fordoxaal3291 Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • this program works great! exactly as I wanted

    @theentertainment7239@theentertainment7239 Жыл бұрын

  • Amazing video! Really helpful 👌

    @georgekrax@georgekrax Жыл бұрын

  • Amazing job comparing these two, thank you

    @gandalf4235@gandalf4235 Жыл бұрын

    • Thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Great video thanks a lot! Help understand many things of both package!! 😊😊

    @spinoff2011@spinoff20113 ай бұрын

  • really helped me understanding the core of three js, thanks !

    @markwasfy9230@markwasfy9230 Жыл бұрын

    • Great to hear!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Really amazing. Kudos man. I already have a lot of experience with vanilla threejs. I wanted to see whether it was a good decision to use react-three-fiber. Thanks for this vid. You got yourself a subscriber

    @_sarps@_sarps Жыл бұрын

    • Thanks for the sub!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Wow, amazing, I learned so much :)

    @_flavio_silva@_flavio_silva Жыл бұрын

  • Another maybe handy tip: you can add attach="material1" through material6 for meshMaterial of cubes. Helps if you have individual images you'd want to attach to different sides like say a Minecraft Block

    @nyawho.@nyawho. Жыл бұрын

  • Excellent one, really 👌🏻Please make other ones on the same topic

    @abernier75@abernier75 Жыл бұрын

  • at 5 min in the video I said to myself that I must subscribe to this channel, and then I that this only have 430 subs ?! how can this be! This is top notch content and production. chapeux! and thanks for the video

    @ArielBenichou@ArielBenichou Жыл бұрын

    • Thanks for the feedback! 😃

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • My fellow developers, you have come to a good mentor 😌

    @shakirulhasan@shakirulhasan Жыл бұрын

  • Execellent video - Title can be Fiber under the hood - side-by-side comparison! Thanks a lot.

    @AstraRudra@AstraRudra Жыл бұрын

    • Thanks for the feedback!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Dude, you are amazing!!! 💯💯💯💯💯

    @fatihinci1858@fatihinci1858 Жыл бұрын

  • 23:53 is such a good call of the fiber developers. Another very important effect of the correct gl settings is that: the more intense the white light is, the more white every object gets, as it does in real life. (without these settings, colors would flip e.g. from red to yellow)

    @byGDur@byGDur Жыл бұрын

    • Great point - agreed!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • Thank you so much for this. As someone who started in R3F I have always wanted to know how three actually works in order to use R3F better. Cannot express my appreciation in words.

    @fredachang9244@fredachang92448 ай бұрын

    • Glad it was helpful!

      @RabbitHoleSyndrome@RabbitHoleSyndrome8 ай бұрын

  • Great content !!! Please make more :D

    @avivkandabi7088@avivkandabi7088 Жыл бұрын

  • This is really helpful! Thank you.

    @pawan.choudhari@pawan.choudhari Жыл бұрын

    • Glad it helped!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • So cool this was. Do more!!

    @AmitErandole@AmitErandole Жыл бұрын

  • Instant sub. Great stuff!

    @FullMe7alJacke7@FullMe7alJacke7 Жыл бұрын

  • Amazing work !!! Thank you ❤

    @papa4614@papa4614 Жыл бұрын

    • You bet, thanks for watching!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын

  • This is soo good! Thanks!

    @YomiTosh@YomiTosh Жыл бұрын

  • incredible vid man thanks

    @valentinkrajzelman4649@valentinkrajzelman46496 ай бұрын

  • It's really helpful to me. thank u so much

    @user-rq3uw2um9s@user-rq3uw2um9s Жыл бұрын

  • Amazing dude!

    @federiconicolasgarcia6370@federiconicolasgarcia6370 Жыл бұрын

  • Excellent, thanks!

    @hernanj.gonzalez3461@hernanj.gonzalez34614 ай бұрын

  • Very informational video thank you

    @Chriss-cn1ch@Chriss-cn1ch5 ай бұрын

  • Great content man.

    @jervansahd3657@jervansahd3657 Жыл бұрын

  • so useful! i'm converting some stuff from threejs over to react since we can now actually use it. I assume there's some sort of hook or callback for loading models, since I do quite a lot of fun stuff to model's animations in my threejs prototypes. I guess i'll have to look into it.

    @JunkerJames@JunkerJames7 ай бұрын

  • Great video!

    @kristianrykkje4255@kristianrykkje42556 ай бұрын

  • Really really helps, thanks a lot

    @ffcdhxhhs2488@ffcdhxhhs2488 Жыл бұрын

  • Well well 🎉🎉🎉❤❤ i loved that video. Im react developer trying to learn three js mostly to start on making cool websites

    @deekshantmalvi4612@deekshantmalvi4612 Жыл бұрын

    • Best of luck!

      @RabbitHoleSyndrome@RabbitHoleSyndrome Жыл бұрын
KZhead