React Three Fiber (R3F) - The Basics

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ม.ค. 2025

ความคิดเห็น • 121

  • @iamrithmic
    @iamrithmic  11 หลายเดือนก่อน +3

    👽 Join the Discord Server (link in the description)

  • @tien556
    @tien556 9 หลายเดือนก่อน +9

    I love your beginner friendly vibe! Hope to see a follow-up of Intermediate R3F.

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Thank you :)

  • @emkbacon
    @emkbacon 10 หลายเดือนก่อน +11

    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
      @iamrithmic  10 หลายเดือนก่อน +2

      Haha, yeah. Putting the maths we learnt in college to actual use

  • @rodiontref
    @rodiontref ปีที่แล้ว +5

    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
      @iamrithmic  11 หลายเดือนก่อน +1

      You're very welcome!
      All it takes is to jump right into it. You've got this!

  • @muhammadalfaris100
    @muhammadalfaris100 9 หลายเดือนก่อน +2

    Thank you for your tutorial, really2 friendly for beginner like me. hahaha

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Glad to hear it! You're more than welcome

    • @muhammadalfaris100
      @muhammadalfaris100 8 หลายเดือนก่อน

      @@iamrithmic can't wait other your awesome tutorial man !

  • @emadarab8428
    @emadarab8428 9 หลายเดือนก่อน +2

    The crash course was very good, please take the more advanced crash course as soon as possible🤩

  • @prayushdave
    @prayushdave 9 หลายเดือนก่อน +1

    The video is amazing intro to the library. Thanks man!

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      My pleasure!

  • @ReshmaShaik-ug5oy
    @ReshmaShaik-ug5oy ปีที่แล้ว +2

    thank you very much for this tutorurial finally I understood the concept of setting up the project envinronment and the react three fiber

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน

      Glad it helped! Thank you for the comment and stay tuned!

  • @HenryHa-o4h
    @HenryHa-o4h ปีที่แล้ว +7

    Just finished the video -- great work! Probably my favourite video I have seen for beginners, so thanks!

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว +1

      Amazing! These words mean a lot. Glad you found value in this.

  • @justinjtownsend
    @justinjtownsend 9 หลายเดือนก่อน +1

    Hi @rithmic... a really informative hour or so for me, thanks very much. 🙂

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      You are more than welcome! Glad it was of value to you

  • @culturehyena
    @culturehyena ปีที่แล้ว +3

    Thanks for this great tutorial! I’m now up and running and having a great time exploring what RTF can do :-)

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว

      Amazing! Have fun with it :)

  • @leroydickens3705
    @leroydickens3705 4 หลายเดือนก่อน

    This video also helped me understand some concepts I never grasped in plain react such as props and hooks such as hover and clicked.

  • @kentnathaniel6961
    @kentnathaniel6961 4 หลายเดือนก่อน

    Great video, I'm into 3D React lately to make my portfolio more beautiful
    And this video helped me so much to understand the basic concept of R3F.
    Still a long way to create my 3D portfolio though, getting excited to watch the other videos.

  • @Knylch
    @Knylch 8 หลายเดือนก่อน +1

    great tutorial and incredibly useful for getting started, thank you!

    • @iamrithmic
      @iamrithmic  7 หลายเดือนก่อน

      You're very welcome!

  • @colindmg
    @colindmg 8 หลายเดือนก่อน +1

    Exactly the video I was looking for, thanks a lot for your work :)

    • @iamrithmic
      @iamrithmic  7 หลายเดือนก่อน

      Glad it was helpful!

  • @TheRonron1994
    @TheRonron1994 หลายเดือนก่อน

    This was really cool. Short but very informative.

  • @mario.valkovic
    @mario.valkovic 8 หลายเดือนก่อน +3

    very nice tutorial, thanks. hope to see more advanced stuff from you in the future!

  • @mayaahmed
    @mayaahmed 11 หลายเดือนก่อน +2

    Thanks. Excellent. Best instructions on the topic. Helped me big time.

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน

      Great to hear! And thanks for the comment

  • @yttanel
    @yttanel หลายเดือนก่อน

    Thank you for this tutorial mate!

  • @surajprajapati4890
    @surajprajapati4890 ปีที่แล้ว +3

    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
      @iamrithmic  ปีที่แล้ว +1

      Thank you! And yes more on the way

  • @rajdarade8226
    @rajdarade8226 ปีที่แล้ว +1

    Great Explanation . Thank you so much for this tutorial !!!!!!!!!!

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน +1

      You're very welcome!

  • @jatiquep5543
    @jatiquep5543 9 หลายเดือนก่อน +1

    You just got yourself a subscriber❤❤

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Love that! Feel free to join the Discord server as well ;)

  • @potantirittisak8494
    @potantirittisak8494 ปีที่แล้ว +1

    Super helpful! Thank you!

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว +1

      You’re more than welcome to

  • @goodtyper
    @goodtyper 11 หลายเดือนก่อน +1

    this was excellent

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน

      Thank you!

  • @pratyunchoubey6604
    @pratyunchoubey6604 11 หลายเดือนก่อน +1

    Really Amazing Content 😻😻😻😻

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน

      Thank you so much 😀

  • @neodinok-it3ym
    @neodinok-it3ym ปีที่แล้ว +1

    Very helpful, thanks a lot

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว

      You are more than welcome

  • @8BitGamerYT1
    @8BitGamerYT1 4 หลายเดือนก่อน

    44:55 With the help of useState , finding out if mouse is hovered and then using if condition to change color on the basis of hover state.
    Instead of color, use that data for modifying rotation speed as in 47:58 or anything else❤

  • @michalguy
    @michalguy ปีที่แล้ว +1

    This is such a great tutorial. Thank you so much!

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว

      Thank you for the comment :). Glad it was helpful

  • @tech3425
    @tech3425 6 หลายเดือนก่อน

    Loved the video. Thanks for this!

  • @auntie_alias
    @auntie_alias 6 หลายเดือนก่อน

    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
      @auntie_alias 6 หลายเดือนก่อน

      Just finished the tutorial, great job! Thanks so much - you packed a wild amount of information into 71 minutes!!

  • @stanleychukwu7424
    @stanleychukwu7424 ปีที่แล้ว +1

    i enjoyed the video, i liked the video & i have subscribed!! thank you so much

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว

      This means a lot. Thank you very much!

  • @innocentboy02
    @innocentboy02 9 หลายเดือนก่อน +2

    You are going to be reason for me getting a job

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Thanks for such a comment ❤️. However that will be because of your own hard work!
      Good luck getting a job

  • @Sushant_xsharma
    @Sushant_xsharma 9 หลายเดือนก่อน

    more tutorials needed of r3f and adding text to layer of cylinder or something

  • @Royler-zt4bz
    @Royler-zt4bz 9 หลายเดือนก่อน +1

    Gracias!!

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Da nada

  • @antwanabdelmaqsoud999
    @antwanabdelmaqsoud999 ปีที่แล้ว +1

    Thank you!

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว

      You are more than welcome!

  • @gteja9765
    @gteja9765 8 หลายเดือนก่อน

    Thanks bro this helped me a lot

  • @pulsechainalltheway1845
    @pulsechainalltheway1845 7 หลายเดือนก่อน

    Amazing video, this is nice.

  • @MrBumbo90
    @MrBumbo90 10 หลายเดือนก่อน +2

    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
      @emkbacon 10 หลายเดือนก่อน +1

      hell yeah thanks for the solution

    • @iamrithmic
      @iamrithmic  10 หลายเดือนก่อน

      🔥 Nice one!

  • @saidgouzal8013
    @saidgouzal8013 6 หลายเดือนก่อน

    Thank you man!!

  • @xinliliu-m6j
    @xinliliu-m6j 10 หลายเดือนก่อน +1

    thank you

    • @iamrithmic
      @iamrithmic  10 หลายเดือนก่อน

      You're more than welcome!

  • @ikidtech
    @ikidtech ปีที่แล้ว +1

    what plugin for vscode do you use at 54:13 where it shows all the props?

    • @NarcisMM
      @NarcisMM ปีที่แล้ว

      That's typescript. Much better to work with than vanilla js

    • @ikidtech
      @ikidtech ปีที่แล้ว

      That’s vanilla JavaScript…. The file is jsx and it says it at the bottom….

    • @NarcisMM
      @NarcisMM ปีที่แล้ว

      @@ikidtechAh yeah I see that now. Just tested with a jsx file on my vscode and it works the same though.

    • @ikidtech
      @ikidtech ปีที่แล้ว

      @@NarcisMM any syntax suggestion extensions that you have?

    • @NarcisMM
      @NarcisMM ปีที่แล้ว

      @@ikidtech I just use the out of the box VSCode intellisense, and I use TS in all of my projects which helps.

  • @whirlfull
    @whirlfull 9 หลายเดือนก่อน +1

    I am just gonna go ahead and put a thumb up to this video! 🤭

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Really means a lot! Thank you

  • @WebSpaceHub
    @WebSpaceHub ปีที่แล้ว +1

    Amazing

  • @stanleychukwu7424
    @stanleychukwu7424 ปีที่แล้ว +3

    are you going to make more r3f courses in the future?

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว +1

      Yes, a lot more. Is there anything that you would like me to focus on. Perhaps I could look into them

    • @stanleychukwu7424
      @stanleychukwu7424 ปีที่แล้ว +2

      @@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
      @iamrithmic  ปีที่แล้ว +1

      @@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
      @Cos3D ปีที่แล้ว

      Can we make 3d games with online functionality with R3F ?​@@iamrithmic

  • @TomWalshHud
    @TomWalshHud 6 หลายเดือนก่อน

    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 :(

  • @tech_xeniex
    @tech_xeniex 3 หลายเดือนก่อน

    Thanks so much, I've surely gained a lot,, you missed on textures.

  • @TheThebestgame4
    @TheThebestgame4 ปีที่แล้ว

    can you do a video on post processing effects ? Especially how to implement the post processing effects for already existing 3d models.

  • @fathan1247
    @fathan1247 ปีที่แล้ว

    after all this time, finally new vid, btw can u upload another golang (tutorial) vid? or related to backend maybe?

    • @iamrithmic
      @iamrithmic  ปีที่แล้ว +1

      Yes, it's been quite a while. But now we're back!!
      Perhaps at some point it would be cooled to revisit Go again :)

  • @nikhilpakhloo
    @nikhilpakhloo ปีที่แล้ว +1

    How to position initial position of 3d model

  • @Rahmankhattak-x5k
    @Rahmankhattak-x5k 11 หลายเดือนก่อน

    sir create one video more for the React Three Fiber This is very helpful for beginner Please create one one more

  • @TheBingePanel
    @TheBingePanel 8 หลายเดือนก่อน

    I love your video wow, but when i hover around the sphere mine doesnt change color

  • @witlynx
    @witlynx 11 หลายเดือนก่อน

    What about Leva dependency? Any pluses, minuses for them else?

  • @anassechcherki6295
    @anassechcherki6295 ปีที่แล้ว

    Thank you

  • @jacquelynecarmen
    @jacquelynecarmen 5 หลายเดือนก่อน

    should I learn Three.js before starting with r3f?

  • @martymcfly2403
    @martymcfly2403 ปีที่แล้ว +1

    Thanks for the video! Any chance of knowing your vscode theme please ? would be appreciated :))

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน +1

      Thank you. And the Noctis theme

    • @martymcfly2403
      @martymcfly2403 11 หลายเดือนก่อน

      @@iamrithmic ty!

  • @aakashkharabe8561
    @aakashkharabe8561 ปีที่แล้ว

    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

  • @damienalves4234
    @damienalves4234 ปีที่แล้ว

    Hello ! what extension use to for auto import ? thanks :)

  • @dan_can_swim
    @dan_can_swim ปีที่แล้ว

    What theme are you using in VSCode?

    • @iamrithmic
      @iamrithmic  11 หลายเดือนก่อน +1

      Noctis theme

  • @vikasrajput2253
    @vikasrajput2253 ปีที่แล้ว

    how to create a custom object like a chair , sun ,etc using three

  • @christian2809
    @christian2809 12 วันที่ผ่านมา

    fyi anyone coming here. Leva doesn't seem to be maintained any more. Colorpicker doesn't work for instance but no real change/updates.

  • @Mujeeb4585
    @Mujeeb4585 2 หลายเดือนก่อน

    Can you make more videos on it. Please Make some 3D websites clones

  • @adamczarny6482
    @adamczarny6482 ปีที่แล้ว

    Hey, what about transition?

  • @nikhilpakhloo
    @nikhilpakhloo ปีที่แล้ว

    How to do 3d model posisioning

  • @makennamartin1157
    @makennamartin1157 9 หลายเดือนก่อน +1

    this is exactly the video i needed to thoroughly understand everything thank you!!! the documentation kinda sucks

    • @iamrithmic
      @iamrithmic  9 หลายเดือนก่อน

      Really glad it was useful :)

  • @Pywyoyuyp
    @Pywyoyuyp 6 หลายเดือนก่อน +1

    Like my comment so I can come back and follow this tutorial 🎉

    • @alixhenriot5772
      @alixhenriot5772 6 หลายเดือนก่อน

      You have no excuse now

  • @carmenmanuela8747
    @carmenmanuela8747 23 วันที่ผ่านมา

    really, it is just a demo, instead of instructional video, without explanation just demo

  • @antoniofuller2331
    @antoniofuller2331 หลายเดือนก่อน

    hmm

  • @lobo5727
    @lobo5727 6 หลายเดือนก่อน

    #clickthataddandcomeback

  • @hamidbensarghin
    @hamidbensarghin 9 หลายเดือนก่อน

    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