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!
Brother you are a life saver. I am a react developer who was trying to learn react three fiber. Read r3f docs -> got confused -> started reading threejs docs -> got confused -> tried coding in r3f -> thought documentation is incomplete -> started reading blogs -> did more coding -> again got confused -> watched this video. Now I am happy some of my concept were cleared. Thank you so so much!!!!
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!
@@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.
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
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!
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.
greg, this is an extremely valuable video, i find it really useful. you truly dive deep into the holes and present the findings so clearly and elegantly. as a severe RHS patient myself, i salute you, greg, thank you.
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!
This is a great tutorial, thanks! one added advantage of the naming convention is that this way there's no confusion between three.js classes you might want to import and the native fiber elements.
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
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! 🙌🏻
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.
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 😄
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
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.
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!
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.
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.
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!
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. 👍
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.
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)
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
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!
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...
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
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.
I like R3F for being a very good way to make quicky scenes without all the hassle, but I also noticed that this type of simplicity is a drawback of it, I've known threejs and how it works and have been using it for work, in the project I started creating things pretty straightforward using R3F with the drei library (which is encouraged by R3F) and I found myself removing more and more R3F related components and moving back to threejs, right now the only thing left from the project that is R3F related is the component and mounting and unmounting some models that act as helpers (like the grid) depending on the settings. Overall, R3F does achieve exactly what it tries to accomplish but for larger scale projects you should probably go for better solution that avoids using React Three Fiber IMO. Anyways, great explanation and fun to watch, it certainly would have helped me when I started my work with R3F for sure.
Hey can you please make another episode of this? Or perhaps a series? I know it will 100% be popular among this community. Lots of a great opportunity for growth.
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
Thanks for the insight. This is very useful to understand the defaults. I wonder why create a library which is not framework agnostic. It could have been a set of helpers or subclasses to be then integrated with the framework or plain JS. With this choice you already create factions and reduce the support.
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!
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.
R3F seems simple and concise. Thank you for the explanation
Brother you are a life saver. I am a react developer who was trying to learn react three fiber. Read r3f docs -> got confused -> started reading threejs docs -> got confused -> tried coding in r3f -> thought documentation is incomplete -> started reading blogs -> did more coding -> again got confused -> watched this video.
Now I am happy some of my concept were cleared.
Thank you so so much!!!!
You bet thanks for watching 😄
This is an absolutely awesome overview. Your explanations are crystal clear, despite me not having used Three in about a year.
This is a lovely introduction! I love that you compared the two libaries side by side. Your explanations are concise and effective. Thank you!
By far one of the best online dev tutorials I've ever seen! Seriously - great work.
Really appreciate it, thanks!
this video in particular was really helpful! very crisp explanations. the flow of the video was really natural and well-paced. thanks man!
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!
Thanks for the kind feedback 😀. Glad it helped!
@@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.
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
This is the video I was looking for all along, took me a while to get the right keywords on the TH-cam search field to finally get to this point.
Glad it helped! Curious which search terms worked & didn't work for you?
Same. This is the tutorial I was looking for all along. Thank you so much.
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
Thanks for the feedback! 😃
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!
Great to hear, thanks for watching!
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.
Glad it helped! 😃
greg, this is an extremely valuable video, i find it really useful. you truly dive deep into the holes and present the findings so clearly and elegantly. as a severe RHS patient myself, i salute you, greg, thank you.
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!
Thanks for the feedback! 😃
This is a great tutorial, thanks!
one added advantage of the naming convention is that this way there's no confusion between three.js classes you might want to import and the native fiber elements.
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
I'm happy this helped you out! 🙂
I am not a React nor a React Fiber user, but this comparison is an absolut insight! - Thank you for that! Subscribed!
I love that you go into the details. This is explanation, not just demonstration. Thank you for the video!
Glad it helped! 😃
One of the best videos I've watched ever on animation, information, presentation and सरल
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! 🙌🏻
Thanks for the great feedback Miles!
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.
Glad this was helpful!
@@RabbitHoleSyndrome I followed your instructions and made some great progress, thanks so much, this video is truely an amazing resource.
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!
Glad it helped!
I like your idea of deep diving everything. I'm hoping that you're making more videos!
Thanks!
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!
You're very welcome, thanks for the sub!
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 😄
Awesome, glad it helped! 😃
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
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.
Thanks for watching!
Great video, good luck with your TH-cam channel! ✌️
Thanks, I appreciate it!
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!
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.
Glad it helped!
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.
Glad it was helpful!
Thank you so much for this video. A solid explanation on all of these concepts is an absolute godsent.
This channel gonna blow up. Thanks, man. Keep up the quality content.
great video. looking forward to watching more of your tutorials. nice side by side. and glad you keep going deeper
Thanks for watching!
really good wish I had this one year ago, bumped into much of these issue you are addressing.
the side by side is perfect for my learning style. thank you so much
Thanks for watching!
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!
Thank you Bryce!
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. 👍
Thank you, really glad it helped!
Really excellent demonstration!! Thanks so much for creating this video and sharing it with us.
You bet! Thanks for watching 😃
My first time seeing a video from this channel! Very engaging content. Subbed 5 mins in
Awesome, thanks for the sub!
Excellent! Please keep posting other videos about R3F if you feel like to! :)
what an amazing explanation video keep it up you deserve more views
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.
I’m glad it helped!
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)
Great point - agreed!
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
Thanks for the sub!
extremely helpful to have - thank you for breaking down the concepts to better understand three/fiber
You bet!
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!
I am glad that there are people like you, who can help beginner streamers. Thank you brother, I appreciate your support. Always fresh updates
Actually genius format of explaination.
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...
Great documentation! Seeing the vanilla and react js side by side helps a ton
loved it. never touched 3js, but you're making me wanna try.
Happy to help!
damn, this video is a gem. the best I've seen about r3f fundamentals, really helpful
Great video! Subscribed! Looking forward to more content!
Thanks Ryan!
I'm coming from the react side of things and looking to integrate three in my next project! This video was a great break down! Thank you!
I’m glad it helped! 😃
this not fair at all man you make this awsome and that's it !!! keep up the good content
Incredibly helpful, can't wait to learn more from these under-the-hood videos you make.
Incredibly helpful. Thank you my guy
this is great, I looked all around for it. Thank you very much!
subscribed, would love to see all of the videos you've got lined up for the future
Thanks for the sub!
Finally content we all are lookig for!
My fellow developers, you have come to a good mentor 😌
Subbed! I'm learning three js/fiber/webgi keep the videos coming.
Execellent video - Title can be Fiber under the hood - side-by-side comparison!
Thanks a lot.
Thanks for the feedback!
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!
Glad it helped!
This is absolutely fantastic! was stuck at the same for very long
You made everything easy to understand. ❤
I actually learned something from this video -- very well done.
Glad it helped!
Incredible Video! Your amazing for creating this!
Amazing video, good to see something more fundamental than other more pratical, hands-on tutorials out here.
Glad it helped!
Wow, the video and the explanation was awesome!!! THANKS 👍We wish to see more tutorials in your channel!
Thanks for the feedback! 😃
Thanks a alot brother. This is what i was searching for. Again thank you very much❤❤❤
Great vid, high quality and organization of the material is on point 👌
Superb tutorial, really helped me to understand rtf
Glad it helped!
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!
BROO this is exactly what I was looking for!
Amazing job comparing these two, thank you
Thanks for watching!
Awesome video! Really helped me to understand the relationship between react-three/fiber and three ❤
Glad it helped!
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.
Love this man, keep the videos coming
I like R3F for being a very good way to make quicky scenes without all the hassle, but I also noticed that this type of simplicity is a drawback of it, I've known threejs and how it works and have been using it for work, in the project I started creating things pretty straightforward using R3F with the drei library (which is encouraged by R3F) and I found myself removing more and more R3F related components and moving back to threejs, right now the only thing left from the project that is R3F related is the component and mounting and unmounting some models that act as helpers (like the grid) depending on the settings.
Overall, R3F does achieve exactly what it tries to accomplish but for larger scale projects you should probably go for better solution that avoids using React Three Fiber IMO. Anyways, great explanation and fun to watch, it certainly would have helped me when I started my work with R3F for sure.
Thank you for this video,answered so many questions in short time ❤❤❤
really helped me understanding the core of three js, thanks !
Great to hear!
Hey can you please make another episode of this? Or perhaps a series? I know it will 100% be popular among this community. Lots of a great opportunity for growth.
This it by far the best tutorial for someone to start their three.js/R3F journey.
Godd job man!
Thanks, glad it helped!!
Excellent one, really 👌🏻Please make other ones on the same topic
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
Great Explanation! Thanks for this video
Well well 🎉🎉🎉❤❤ i loved that video. Im react developer trying to learn three js mostly to start on making cool websites
Best of luck!
Great intro to R3F, thanks!
Worth mentioning drei is probably pronounced "dry", as in the German word for Three, rather than "forgot about drei":)
Thanks for watching! And really good point about the pronunciation, I’ve made sure to get that right in other videos.
Excellent explanations! Thanks much!!
Thanks for the insight. This is very useful to understand the defaults.
I wonder why create a library which is not framework agnostic. It could have been a set of helpers or subclasses to be then integrated with the framework or plain JS. With this choice you already create factions and reduce the support.
Great content !!! Please make more :D
awesome, thanks. Greeting from Colombia
Dude, you are amazing!!! 💯💯💯💯💯
Beautiful video sir
Thankyou for such an informative video. Liked and Subbed.
this program works great! exactly as I wanted
Great video thanks a lot! Help understand many things of both package!! 😊😊