Тёмный

React Three Fiber (R3F) - The Basics 

rithmic
Подписаться 16 тыс.
Просмотров 73 тыс.
50% 1

Опубликовано:

 

27 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 114   
@iamrithmic
@iamrithmic 8 месяцев назад
👽 Join the Discord Server (link in the description)
@tien556
@tien556 6 месяцев назад
I love your beginner friendly vibe! Hope to see a follow-up of Intermediate R3F.
@iamrithmic
@iamrithmic 6 месяцев назад
Thank you :)
@leroydickens3705
@leroydickens3705 Месяц назад
This video also helped me understand some concepts I never grasped in plain react such as props and hooks such as hover and clicked.
@emkbacon
@emkbacon 6 месяцев назад
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 6 месяцев назад
Haha, yeah. Putting the maths we learnt in college to actual use
@rodiontref
@rodiontref 8 месяцев назад
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 8 месяцев назад
You're very welcome! All it takes is to jump right into it. You've got this!
@HenryHa-o4h
@HenryHa-o4h 11 месяцев назад
Just finished the video -- great work! Probably my favourite video I have seen for beginners, so thanks!
@iamrithmic
@iamrithmic 11 месяцев назад
Amazing! These words mean a lot. Glad you found value in this.
@emadarab8428
@emadarab8428 6 месяцев назад
The crash course was very good, please take the more advanced crash course as soon as possible🤩
@prayushdave
@prayushdave 5 месяцев назад
The video is amazing intro to the library. Thanks man!
@iamrithmic
@iamrithmic 5 месяцев назад
My pleasure!
@justinjtownsend
@justinjtownsend 6 месяцев назад
Hi @rithmic... a really informative hour or so for me, thanks very much. 🙂
@iamrithmic
@iamrithmic 6 месяцев назад
You are more than welcome! Glad it was of value to you
@mario.valkovic
@mario.valkovic 5 месяцев назад
very nice tutorial, thanks. hope to see more advanced stuff from you in the future!
@culturehyena
@culturehyena 10 месяцев назад
Thanks for this great tutorial! I’m now up and running and having a great time exploring what RTF can do :-)
@iamrithmic
@iamrithmic 10 месяцев назад
Amazing! Have fun with it :)
@mayaahmed
@mayaahmed 8 месяцев назад
Thanks. Excellent. Best instructions on the topic. Helped me big time.
@iamrithmic
@iamrithmic 8 месяцев назад
Great to hear! And thanks for the comment
@muhammadalfaris100
@muhammadalfaris100 5 месяцев назад
Thank you for your tutorial, really2 friendly for beginner like me. hahaha
@iamrithmic
@iamrithmic 5 месяцев назад
Glad to hear it! You're more than welcome
@muhammadalfaris100
@muhammadalfaris100 5 месяцев назад
@@iamrithmic can't wait other your awesome tutorial man !
@surajprajapati4890
@surajprajapati4890 10 месяцев назад
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 9 месяцев назад
Thank you! And yes more on the way
@goodtyper
@goodtyper 8 месяцев назад
this was excellent
@iamrithmic
@iamrithmic 8 месяцев назад
Thank you!
@Sushant_xsharma
@Sushant_xsharma 6 месяцев назад
more tutorials needed of r3f and adding text to layer of cylinder or something
@jatiquep5543
@jatiquep5543 6 месяцев назад
You just got yourself a subscriber❤❤
@iamrithmic
@iamrithmic 6 месяцев назад
Love that! Feel free to join the Discord server as well ;)
@rajdarade8226
@rajdarade8226 8 месяцев назад
Great Explanation . Thank you so much for this tutorial !!!!!!!!!!
@iamrithmic
@iamrithmic 8 месяцев назад
You're very welcome!
@MrBumbo90
@MrBumbo90 6 месяцев назад
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 6 месяцев назад
hell yeah thanks for the solution
@iamrithmic
@iamrithmic 6 месяцев назад
🔥 Nice one!
@8BitGamerYT1
@8BitGamerYT1 25 дней назад
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❤
@pratyunchoubey6604
@pratyunchoubey6604 8 месяцев назад
Really Amazing Content 😻😻😻😻
@iamrithmic
@iamrithmic 8 месяцев назад
Thank you so much 😀
@potantirittisak8494
@potantirittisak8494 9 месяцев назад
Super helpful! Thank you!
@iamrithmic
@iamrithmic 9 месяцев назад
You’re more than welcome to
@tech3425
@tech3425 3 месяца назад
Loved the video. Thanks for this!
@michalguy
@michalguy 9 месяцев назад
This is such a great tutorial. Thank you so much!
@iamrithmic
@iamrithmic 9 месяцев назад
Thank you for the comment :). Glad it was helpful
@neodinok-it3ym
@neodinok-it3ym 9 месяцев назад
Very helpful, thanks a lot
@iamrithmic
@iamrithmic 9 месяцев назад
You are more than welcome
@whirlfull
@whirlfull 6 месяцев назад
I am just gonna go ahead and put a thumb up to this video! 🤭
@iamrithmic
@iamrithmic 6 месяцев назад
Really means a lot! Thank you
@stanleychukwu7424
@stanleychukwu7424 11 месяцев назад
i enjoyed the video, i liked the video & i have subscribed!! thank you so much
@iamrithmic
@iamrithmic 11 месяцев назад
This means a lot. Thank you very much!
@Royler-zt4bz
@Royler-zt4bz 5 месяцев назад
Gracias!!
@iamrithmic
@iamrithmic 5 месяцев назад
Da nada
@pulsechainalltheway1845
@pulsechainalltheway1845 4 месяца назад
Amazing video, this is nice.
@saidgouzal8013
@saidgouzal8013 2 месяца назад
Thank you man!!
@gteja9765
@gteja9765 5 месяцев назад
Thanks bro this helped me a lot
@antwanabdelmaqsoud999
@antwanabdelmaqsoud999 11 месяцев назад
Thank you!
@iamrithmic
@iamrithmic 11 месяцев назад
You are more than welcome!
@Rahmankhattak-x5k
@Rahmankhattak-x5k 8 месяцев назад
sir create one video more for the React Three Fiber This is very helpful for beginner Please create one one more
@xinliliu-m6j
@xinliliu-m6j 7 месяцев назад
thank you
@iamrithmic
@iamrithmic 7 месяцев назад
You're more than welcome!
@auntie_alias
@auntie_alias 2 месяца назад
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 2 месяца назад
Just finished the tutorial, great job! Thanks so much - you packed a wild amount of information into 71 minutes!!
@fathan1247
@fathan1247 11 месяцев назад
after all this time, finally new vid, btw can u upload another golang (tutorial) vid? or related to backend maybe?
@iamrithmic
@iamrithmic 11 месяцев назад
Yes, it's been quite a while. But now we're back!! Perhaps at some point it would be cooled to revisit Go again :)
@TheBingePanel
@TheBingePanel 5 месяцев назад
I love your video wow, but when i hover around the sphere mine doesnt change color
@witlynx
@witlynx 7 месяцев назад
What about Leva dependency? Any pluses, minuses for them else?
@TheThebestgame4
@TheThebestgame4 10 месяцев назад
can you do a video on post processing effects ? Especially how to implement the post processing effects for already existing 3d models.
@RolandElvira-l4y
@RolandElvira-l4y 7 дней назад
Walker Joseph Anderson Karen Hall Michelle
@TomWalshHud
@TomWalshHud 2 месяца назад
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 :(
@jacquelynecarmen
@jacquelynecarmen 2 месяца назад
should I learn Three.js before starting with r3f?
@makennamartin1157
@makennamartin1157 6 месяцев назад
this is exactly the video i needed to thoroughly understand everything thank you!!! the documentation kinda sucks
@iamrithmic
@iamrithmic 5 месяцев назад
Really glad it was useful :)
@stanleychukwu7424
@stanleychukwu7424 11 месяцев назад
are you going to make more r3f courses in the future?
@iamrithmic
@iamrithmic 11 месяцев назад
Yes, a lot more. Is there anything that you would like me to focus on. Perhaps I could look into them
@stanleychukwu7424
@stanleychukwu7424 11 месяцев назад
@@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 11 месяцев назад
@@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 9 месяцев назад
Can we make 3d games with online functionality with R3F ?​@@iamrithmic
@adamczarny6482
@adamczarny6482 10 месяцев назад
Hey, what about transition?
@martymcfly2403
@martymcfly2403 9 месяцев назад
Thanks for the video! Any chance of knowing your vscode theme please ? would be appreciated :))
@iamrithmic
@iamrithmic 8 месяцев назад
Thank you. And the Noctis theme
@martymcfly2403
@martymcfly2403 8 месяцев назад
@@iamrithmic ty!
@aakashkharabe8561
@aakashkharabe8561 10 месяцев назад
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 10 месяцев назад
Hello ! what extension use to for auto import ? thanks :)
@nikhilpakhloo
@nikhilpakhloo 9 месяцев назад
How to do 3d model posisioning
@The_Soup_Wizard
@The_Soup_Wizard 9 месяцев назад
Google beans
@ikidtech
@ikidtech 10 месяцев назад
what plugin for vscode do you use at 54:13 where it shows all the props?
@NarcisMM
@NarcisMM 10 месяцев назад
That's typescript. Much better to work with than vanilla js
@ikidtech
@ikidtech 10 месяцев назад
That’s vanilla JavaScript…. The file is jsx and it says it at the bottom….
@NarcisMM
@NarcisMM 10 месяцев назад
@@ikidtechAh yeah I see that now. Just tested with a jsx file on my vscode and it works the same though.
@ikidtech
@ikidtech 10 месяцев назад
@@NarcisMM any syntax suggestion extensions that you have?
@NarcisMM
@NarcisMM 10 месяцев назад
@@ikidtech I just use the out of the box VSCode intellisense, and I use TS in all of my projects which helps.
@lobo5727
@lobo5727 3 месяца назад
#clickthataddandcomeback
@Pywyoyuyp
@Pywyoyuyp 3 месяца назад
Like my comment so I can come back and follow this tutorial 🎉
@alixhenriot5772
@alixhenriot5772 2 месяца назад
You have no excuse now
@tissueweb
@tissueweb 6 месяцев назад
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
@nikhilpakhloo
@nikhilpakhloo 9 месяцев назад
How to position initial position of 3d model
@innocentboy02
@innocentboy02 6 месяцев назад
You are going to be reason for me getting a job
@iamrithmic
@iamrithmic 6 месяцев назад
Thanks for such a comment ❤️. However that will be because of your own hard work! Good luck getting a job
@Knylch
@Knylch 4 месяца назад
great tutorial and incredibly useful for getting started, thank you!
@iamrithmic
@iamrithmic 4 месяца назад
You're very welcome!
@ReshmaShaik-ug5oy
@ReshmaShaik-ug5oy 8 месяцев назад
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 8 месяцев назад
Glad it helped! Thank you for the comment and stay tuned!
@kentnathaniel6961
@kentnathaniel6961 Месяц назад
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.
@colindmg
@colindmg 4 месяца назад
Exactly the video I was looking for, thanks a lot for your work :)
@iamrithmic
@iamrithmic 4 месяца назад
Glad it was helpful!
@vikasrajput2253
@vikasrajput2253 9 месяцев назад
how to create a custom object like a chair , sun ,etc using three
@WebSpaceHub
@WebSpaceHub 10 месяцев назад
Amazing
@dan_can_swim
@dan_can_swim 10 месяцев назад
What theme are you using in VSCode?
@iamrithmic
@iamrithmic 8 месяцев назад
Noctis theme
@anassechcherki6295
@anassechcherki6295 11 месяцев назад
Thank you
@iamrithmic
@iamrithmic 11 месяцев назад
You're welcome :)
Далее
I wish I knew this before using React Three Fiber
28:23
Я ИДЕАЛЬНО ПОЮ
00:31
Просмотров 476 тыс.
How to Learn Three.js in 2024 ( Full Guide )
6:41
Просмотров 90 тыс.
Three.js Optimization - Best Practices and Techniques
17:47
The Home Server I've Been Wanting
18:14
Просмотров 76 тыс.
I tried React and it Ruined My Life
1:19:10
Просмотров 132 тыс.
React Three Fiber Tutorial - Rapier Physics Engine
8:38
Framer Motion (React) - The Basics
17:07
Просмотров 31 тыс.