React Three Fiber (R3F) - The Basics
Рет қаралды 61,310
Күн бұрынIn this video we will be exploring the world of 3D development using the React Three Fiber (R3F) library, which is built on top of ThreeJS.
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - / discord
⏳ Timestamps
0:00:00 - Introduction
0:02:25 - Installing and Setting up
0:07:23 - Canvas
0:08:13 - Creating a Box
0:11:44 - Lighting
0:14:10 - Positioning Mesh
0:21:21 - Grouping
0:22:32 - Animation
0:33:06 - Other Geometries
0:43:30 - Interactions
0:49:52 - Drei
0:58:05 - Helpers
1:02:30 - Leva
👋 Come say Hi
X - / rithmio
👾 Source Code
- github.com/sixfwa/threejs-basics
🗞️ Useful Links
R3F Docs: docs.pmnd.rs/react-three-fibe...
ThreeJS: threejs.org/docs/index.html#m...
Drei: github.com/pmndrs/drei
#ReactJS #R3F #WebGL
@iamrithmic 6 ай бұрын
👽 Join the Discord Server (link in the description)
@mario.valkovic 3 ай бұрын
very nice tutorial, thanks. hope to see more advanced stuff from you in the future!
@culturehyena 8 ай бұрын
Thanks for this great tutorial! I’m now up and running and having a great time exploring what RTF can do :-)
@iamrithmic 8 ай бұрын
Amazing! Have fun with it :)
@ReshmaShaik-ug5oy 6 ай бұрын
thank you very much for this tutorurial finally I understood the concept of setting up the project envinronment and the react three fiber
@iamrithmic 6 ай бұрын
Glad it helped! Thank you for the comment and stay tuned!
@rodiontref 6 ай бұрын
Thank you very much, this is a very informative video! I know almost no JavaScript and am not very well versed in Threejs and an absolute beginner in React, but everything was clear to me and it was interesting to follow your actions and repeat after. The result was the courage to deal with these new concepts and methods. Respect! 👏👏👏
@iamrithmic 6 ай бұрын
You're very welcome! All it takes is to jump right into it. You've got this!
@tech3425 Ай бұрын
Loved the video. Thanks for this!
@colindmg 2 ай бұрын
Exactly the video I was looking for, thanks a lot for your work :)
@iamrithmic 2 ай бұрын
Glad it was helpful!
@emkbacon 4 ай бұрын
React Three Fiber is really cool. what an awesome library! Love when calculus gets broken down into algebra like this. So much easier than Blender.
@iamrithmic 4 ай бұрын
Haha, yeah. Putting the maths we learnt in college to actual use
@michalguy 7 ай бұрын
This is such a great tutorial. Thank you so much!
@iamrithmic 7 ай бұрын
Thank you for the comment :). Glad it was helpful
@potantirittisak8494 7 ай бұрын
Super helpful! Thank you!
@iamrithmic 7 ай бұрын
You’re more than welcome to
@tien556 4 ай бұрын
I love your beginner friendly vibe! Hope to see a follow-up of Intermediate R3F.
@iamrithmic 4 ай бұрын
Thank you :)
@prayushdave 3 ай бұрын
The video is amazing intro to the library. Thanks man!
@iamrithmic 3 ай бұрын
My pleasure!
@justinjtownsend 4 ай бұрын
Hi @rithmic... a really informative hour or so for me, thanks very much. 🙂
@iamrithmic 4 ай бұрын
You are more than welcome! Glad it was of value to you
@mayaahmed 6 ай бұрын
Thanks. Excellent. Best instructions on the topic. Helped me big time.
@iamrithmic 6 ай бұрын
Great to hear! And thanks for the comment
@Knylch 2 ай бұрын
great tutorial and incredibly useful for getting started, thank you!
@iamrithmic 2 ай бұрын
You're very welcome!
@saidgouzal8013 29 күн бұрын
Thank you man!!
@rajdarade8226 6 ай бұрын
Great Explanation . Thank you so much for this tutorial !!!!!!!!!!
@iamrithmic 6 ай бұрын
You're very welcome!
@gteja9765 3 ай бұрын
Thanks bro this helped me a lot
@emadarab8428 4 ай бұрын
The crash course was very good, please take the more advanced crash course as soon as possible🤩
@neodinok-it3ym 7 ай бұрын
Very helpful, thanks a lot
@iamrithmic 7 ай бұрын
You are more than welcome
@goodtyper 6 ай бұрын
this was excellent
@iamrithmic 6 ай бұрын
Thank you!
@user-bv4xr3yd8w 9 ай бұрын
Just finished the video -- great work! Probably my favourite video I have seen for beginners, so thanks!
@iamrithmic 9 ай бұрын
Amazing! These words mean a lot. Glad you found value in this.
@muhammadalfaris100 3 ай бұрын
Thank you for your tutorial, really2 friendly for beginner like me. hahaha
@iamrithmic 3 ай бұрын
Glad to hear it! You're more than welcome
@muhammadalfaris100 3 ай бұрын
@@iamrithmic can't wait other your awesome tutorial man !
@pulsechainalltheway1845 2 ай бұрын
Amazing video, this is nice.
@stanleychukwu7424 9 ай бұрын
i enjoyed the video, i liked the video & i have subscribed!! thank you so much
@iamrithmic 9 ай бұрын
This means a lot. Thank you very much!
@user-hb3rt9fp9m 8 ай бұрын
Amazing
@antwanabdelmaqsoud999 9 ай бұрын
Thank you!
@iamrithmic 9 ай бұрын
You are more than welcome!
@pratyunchoubey6604 6 ай бұрын
Really Amazing Content 😻😻😻😻
@iamrithmic 6 ай бұрын
Thank you so much 😀
@Royler-zt4bz 3 ай бұрын
Gracias!!
@iamrithmic 3 ай бұрын
Da nada
@surajprajapati4890 8 ай бұрын
Thanks a lot brother. I was searching for best video for beginners and got your video🙏. Please let me know if there are more videos coming on this ?
@iamrithmic 7 ай бұрын
Thank you! And yes more on the way
@jatiquep5543 4 ай бұрын
You just got yourself a subscriber❤❤
@iamrithmic 4 ай бұрын
Love that! Feel free to join the Discord server as well ;)
@user-il2mc9ex8i 5 ай бұрын
thank you
@iamrithmic 5 ай бұрын
You're more than welcome!
@MrBumbo90 4 ай бұрын
If your canvas is not centered in the middle of the page do the following: 1. create a div around the canvas = parent. 2. give it an id 3. give it a height of 100 vh.
@emkbacon 4 ай бұрын
hell yeah thanks for the solution
@iamrithmic 4 ай бұрын
🔥 Nice one!
@anassechcherki6295 9 ай бұрын
Thank you
@iamrithmic 9 ай бұрын
You're welcome :)
@Sushant_xsharma 4 ай бұрын
more tutorials needed of r3f and adding text to layer of cylinder or something
@TheThebestgame4 8 ай бұрын
can you do a video on post processing effects ? Especially how to implement the post processing effects for already existing 3d models.
@innocentboy02 4 ай бұрын
You are going to be reason for me getting a job
@iamrithmic 4 ай бұрын
Thanks for such a comment ❤️. However that will be because of your own hard work! Good luck getting a job
@damienalves4234 8 ай бұрын
Hello ! what extension use to for auto import ? thanks :)
@zoethebird1 3 ай бұрын
I love your video wow, but when i hover around the sphere mine doesnt change color
@TomWalshHud 26 күн бұрын
Great tutorial, although i was getting an error at the very last stage when we incorporate Leva: TypeError: Cannot read property 'getBoundingClientRect' of null Whenever i clicked the colour swatch selector is just exploded. I tried copying the code from github, and same issue :(
@nikhilpakhloo 7 ай бұрын
How to position initial position of 3d model
@uppdanilynx 5 ай бұрын
What about Leva dependency? Any pluses, minuses for them else?
@auntie_alias 28 күн бұрын
Hey! Loving this tutorial so far. Can you explain why you prefer "const fn = ()=>{...}" as opposed to "function fn() {...}"? You mentioned @6:47 that you prefer to use this syntax for functional components. I am always looking for perspectives on best practices for function constants, because it seems like everyone has their own preferences, and I am trying to figure out when to use each type, and why. Thanks!
@auntie_alias 27 күн бұрын
Just finished the tutorial, great job! Thanks so much - you packed a wild amount of information into 71 minutes!!
@aakashkharabe8561 8 ай бұрын
Hey I need a help to install react three fibre on Mac I am try to install npm install @react-three/fiber gives lots of rpm error reinstalled macOS and node but not working
@whirlfull 4 ай бұрын
I am just gonna go ahead and put a thumb up to this video! 🤭
@iamrithmic 4 ай бұрын
Really means a lot! Thank you
@adamczarny6482 8 ай бұрын
Hey, what about transition?
@fathan1247 9 ай бұрын
after all this time, finally new vid, btw can u upload another golang (tutorial) vid? or related to backend maybe?
@iamrithmic 9 ай бұрын
Yes, it's been quite a while. But now we're back!! Perhaps at some point it would be cooled to revisit Go again :)
@user-ny2hm9kc3v 6 ай бұрын
sir create one video more for the React Three Fiber This is very helpful for beginner Please create one one more
@dan_can_swim 8 ай бұрын
What theme are you using in VSCode?
@iamrithmic 6 ай бұрын
Noctis theme
@ikidtech 8 ай бұрын
what plugin for vscode do you use at 54:13 where it shows all the props?
@NarcisMM 8 ай бұрын
That's typescript. Much better to work with than vanilla js
@ikidtech 8 ай бұрын
That’s vanilla JavaScript…. The file is jsx and it says it at the bottom….
@NarcisMM 8 ай бұрын
@@ikidtechAh yeah I see that now. Just tested with a jsx file on my vscode and it works the same though.
@ikidtech 8 ай бұрын
@@NarcisMM any syntax suggestion extensions that you have?
@NarcisMM 8 ай бұрын
@@ikidtech I just use the out of the box VSCode intellisense, and I use TS in all of my projects which helps.
@vikasrajput2253 7 ай бұрын
how to create a custom object like a chair , sun ,etc using three
@jacquelynecarmen 6 күн бұрын
should I learn Three.js before starting with r3f?
@martymcfly2403 7 ай бұрын
Thanks for the video! Any chance of knowing your vscode theme please ? would be appreciated :))
@iamrithmic 6 ай бұрын
Thank you. And the Noctis theme
@martymcfly2403 6 ай бұрын
@@iamrithmic ty!
@stanleychukwu7424 9 ай бұрын
are you going to make more r3f courses in the future?
@iamrithmic 9 ай бұрын
Yes, a lot more. Is there anything that you would like me to focus on. Perhaps I could look into them
@stanleychukwu7424 9 ай бұрын
@@iamrithmic honestly, with what you did with this intro course, i'll say, you take the lead.. i choose to trust your decision on where next to go from here.. i mean, look at your thumbnails, they're of superb quality! i'm wishing you all the best mate! I've turned on the notification bell
@iamrithmic 9 ай бұрын
@@stanleychukwu7424 Thank you very much for those kind words :). It means a lot reading this. I will be pivoting my channel to more 3D related content as well as animations as they're great fun
@Cos3D 7 ай бұрын
Can we make 3d games with online functionality with R3F ?@@iamrithmic
@nikhilpakhloo 7 ай бұрын
How to do 3d model posisioning
@The_Soup_Master 7 ай бұрын
Google beans
@makennamartin1157 4 ай бұрын
this is exactly the video i needed to thoroughly understand everything thank you!!! the documentation kinda sucks
@iamrithmic 3 ай бұрын
Really glad it was useful :)
@lobo5727 Ай бұрын
#clickthataddandcomeback
@Pywyoyuyp Ай бұрын
Like my comment so I can come back and follow this tutorial 🎉
@alixhenriot5772 28 күн бұрын
You have no excuse now
@tissueweb 4 ай бұрын
Thank you for this beneficial video, can you help me with this, I am using @react-three/drei to add text element on the frame, the text is support only english characters. for other language Ex:Arabic is displayed as symbols. Thank you
Khabar SPORT
Рет қаралды 294 М.
Fabiosa Animated
Рет қаралды 8 МЛН
Miro Leon
Рет қаралды 43 М.
ForrestKnight
Рет қаралды 169 М.