Rakha Wibowo
Rakha Wibowo
  • 40
  • 183 370
React Native 3D With React Three Fiber | Three.Js
Hello, in this video i will show you how to load 3D Model in React Native using React Three Fiber and Drei
Full Code - github.com/Rakha112/react-native-animation/tree/main/season2/app/3dModel
Starlink Model - api.starlink.com/public-files/starlink_standard_actuated_product_3d_models.zip
metro.config.js for Expo - gist.github.com/Rakha112/c1619b7d89b015d5697d5202900d52c8
metro.config.js for CLI - gist.github.com/Rakha112/07ac0e45dd0c897819d65efe0fe53598
React Three Fiber - docs.pmnd.rs/react-three-fiber/getting-started/introduction
React Three Drei - github.com/pmndrs/drei#readmethebiblegarth
gltfjsx - gltf.pmnd.rs/
Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo
Chapters:
0:00 - Demo
0:14 - Installing Dependencies
4:11 - Convert Model to Code
6:28 - Load the 3D Model
18:13 - Model Animation
20:43 - Gradient Background
26:01 - Thankyou
Music:
Balloon (Prod. by Lukrembo)
ua-cam.com/video/Byg7QBAbf90/v-deo.html
Animal Friends (Prod. by Lukrembo)
ua-cam.com/video/ag2RePNqwCs/v-deo.html
Переглядів: 2 212

Відео

React Native Custom Drawer With Reanimated
Переглядів 2,9 тис.4 місяці тому
Hello, in this video i will show you how to create Custom Drawer in React Native with Reanimated Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/33-React-Native-Custom-Drawer-2 Reanimated - docs.swmansion.com/react-native-reanimated/ Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo Chapte...
React Native Dark Mode Curtain Effect Animation With Reanimated and Skia
Переглядів 1,4 тис.5 місяців тому
Hello, in this video i will show you how to create Line Chart in React Native with Skia, Reanimated 3 and D3.js from scratch Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/24-React-Native-Dark-Mode Reanimated - docs.swmansion.com/react-native-reanimated/ Skia - shopify.github.io/react-native-skia/docs/getting-started/installation Hey if you found this video helpful...
React Native Line Chart With Reanimated 3, Skia and D3 From Scratch!!!
Переглядів 2,2 тис.5 місяців тому
Hello, in this video i will show you how to create Line Chart in React Native with Skia, Reanimated 3 and D3.js from scratch Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/32-React-Native-Line-Chart Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/ Skia - shopify.github.io/react-native-skia/d...
React Native Custom Carousel with Reanimated 3
Переглядів 1,7 тис.6 місяців тому
Hello, in this video i will show you how to create Custom Carousel in React Native with Reanimated from scratch Inspired by Nitish Khagwal, Twitter nitishkmrk/status/1675402858118922240?t=Izpjhn6FxC4fDIzdLzKQ0w&s=19 Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/31-React-Native-Carousel Reanimated - docs.swmansion.com/react-native-reanimated/ Hey if you...
React Native Bar Chart With Skia And Reanimated From Scratch
Переглядів 2,7 тис.6 місяців тому
Hello, in this video i will show you how to create Bar Chart in React Native with Skia and Reanimated from scratch The design is inspired by Purrweb Agency on Dribbble - dribbble.com/shots/22756562-Calorie-Counter-Mobile-iOS-App Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/30-React-Native-Bar-Chart Reanimated - docs.swmansion.com/react-native-reanimated/ Skia - s...
React Native Card Swipe With Reanimated And Gesture Handler From Scratch
Переглядів 3,3 тис.6 місяців тому
Hello, in this video i will show you how to create Card Swipe in React Native with Reanimated and Gesture Handler Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/29-React-Native-Card-Swipe Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/docs/ Hey if you found this video helpful and if you wan...
React Native Onboading Screen With Reanimated And Gesture Handler
Переглядів 3,8 тис.7 місяців тому
Hello, in this video i will show you how to create Animated Onboarding Screen in React Native with Reanimated and Gesture Handler inspired by Cuberto This video is inspired by Cuberto on Dribbble - dribbble.com/shots/6654320-Animated-Onboarding-Screens Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/28-React-Native-Onboarding-Screen-Cuberto Reanimated - docs.swmansi...
React Native Dark Mode Switch
Переглядів 4 тис.8 місяців тому
Hello, in this video i will show you how to create Dark Mode Switch in React Native with Reanimated and Skia This video is inspired by Kavsoft's video on UA-cam - www.youtube.com/@Kavsoft Make sure you check out Kavsoft's videos - ua-cam.com/video/aHtDymtNdSs/v-deo.htmlsi=_kelat73ycLhCHpH Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/27-React-Native-Dark-Mode-Swit...
React Native Carousel With Pagination, Auto Play and Infinite Loop
Переглядів 4,2 тис.8 місяців тому
Hello, in this video i will show you how to create a Carousel with Pagination, Auto Play and Infinite Loop Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/26-React-Native-Carousel-Disney+ Reanimated - docs.swmansion.com/react-native-reanimated/ Liniear Gradient - github.com/react-native-linear-gradient/react-native-linear-gradient Hey if you found this video helpful...
React Native 3D Shop App UI With React Three Fiber - ThreeJs
Переглядів 2,8 тис.9 місяців тому
Hello, in this video i will show you how to create a 3D Shop App UI in React Native With React Three Fiber Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/25-React-Native-3D-Shop Reanimated - docs.swmansion.com/react-native-reanimated/ Gesture Handler - docs.swmansion.com/react-native-gesture-handler/docs/ React Three Fiber - docs.pmnd.rs/react-three-fiber/getting-s...
React Native Onboarding Screen (Masking) With Reanimated 3 and Skia
Переглядів 7 тис.9 місяців тому
Hello, in this video i will show you how to create Masking Onboarding Screen in React Native With Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/23-React-Native-Masking-Onboarding-Screen Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Illustration ...
React Native Animated Circular Progress Bar With Reanimated 3 and Skia
Переглядів 2,4 тис.9 місяців тому
Hello, in this video i will show you how to create Animated Circular Progress Bar in React Native using Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/22-React-Native-Circular-Progress-Bar Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Hey if you ...
React Native Animated Donut Chart With Reanimated 3 and Skia
Переглядів 3 тис.9 місяців тому
Hello, in this video i will show you how to create Animated Donut Chart in React Native using Reanimated 3 and Skia Full Code - github.com/Rakha112/react-native-animation/tree/main/season1/src/21-React-Native-Donut-Chart Reanimated Docs - docs.swmansion.com/react-native-reanimated/ Skia Docs - shopify.github.io/react-native-skia/docs/getting-started/installation/ Hey if you found this video hel...
React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
Переглядів 1,8 тис.10 місяців тому
React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
React Native Shared Element Transition With Reanimated 3
Переглядів 7 тис.10 місяців тому
React Native Shared Element Transition With Reanimated 3
React Native 3D Three.Js | 3D Character With Animation Using React Three Fiber
Переглядів 1,6 тис.10 місяців тому
React Native 3D Three.Js | 3D Character With Animation Using React Three Fiber
React Native 3D Three.Js | Load 3D Model With React Three Fiber and Drei
Переглядів 9 тис.10 місяців тому
React Native 3D Three.Js | Load 3D Model With React Three Fiber and Drei
React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
Переглядів 7 тис.11 місяців тому
React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
Переглядів 2,6 тис.Рік тому
React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
Переглядів 7 тис.Рік тому
React Native Custom Animated Bottom Tab Navigator With Reanimated 3
React Native Onboarding Screen ( Change Color ) With Reanimated 3
Переглядів 22 тис.Рік тому
React Native Onboarding Screen ( Change Color ) With Reanimated 3
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
Переглядів 3,1 тис.Рік тому
React Native Custom Floating Action Button (FAB) With Reanimated From Scratch
React Native Accordion With Reanimated From Scratch
Переглядів 6 тис.Рік тому
React Native Accordion With Reanimated From Scratch
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
Переглядів 2,6 тис.Рік тому
React Native Stack Carousel / Card Animation With Reanimated And Gesture Handler From Scratch
React Native Onboarding Screen With Reanimated 3
Переглядів 13 тис.Рік тому
React Native Onboarding Screen With Reanimated 3
React Native Custom Swipeable Toast With Reanimated From Scratch
Переглядів 6 тис.Рік тому
React Native Custom Swipeable Toast With Reanimated From Scratch
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
Переглядів 6 тис.Рік тому
React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
React Native Basic Reveal Animation With Moti
Переглядів 3,6 тис.Рік тому
React Native Basic Reveal Animation With Moti
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch
Переглядів 3,4 тис.Рік тому
React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2 From Scratch

КОМЕНТАРІ

  • @deltagamma1442
    @deltagamma1442 18 днів тому

    You did this with three js? Is this possible with react three fiber? Did you use some responsive media query? Nice work!

  • @kushangshah980
    @kushangshah980 19 днів тому

    One question. Does this method convert webGL code to native OpenGL code and generate APK?

  • @joseherrera6698
    @joseherrera6698 21 день тому

    Thanks Crack... Excellent Content... Greetings from Colombia

  • @Abdurrehmankhan-dk2td
    @Abdurrehmankhan-dk2td 21 день тому

    love it

  • @whacoder725
    @whacoder725 24 дні тому

    Bro i am facing issue

  • @whacoder725
    @whacoder725 24 дні тому

    Does it is efficient

  • @politestranger1555
    @politestranger1555 27 днів тому

    you should be more famous !!!

  • @TalhaUymaz
    @TalhaUymaz Місяць тому

    What if we using App.js, what should I do ?

  • @immortal3164
    @immortal3164 Місяць тому

    Tried this in an expo project and didnt work..

  • @sofiaignaciazambranomericq5937
    @sofiaignaciazambranomericq5937 Місяць тому

    thank you!!!!

  • @shfsakib339
    @shfsakib339 Місяць тому

    How can I loop it. I want to show the cards again if its coming to its end. Please help!

  • @kerou4276
    @kerou4276 2 місяці тому

    how much it takes to learn animating like this, and how much it take in real work to build this for the first time from scratch ?. i can't do it by my self if i didn't watch your video ... how can i learn animating skills like yours . thanks for this video.

  • @hellolemons7340
    @hellolemons7340 2 місяці тому

    Would love to see this using flatlist or scrollview!!!

  • @azhara.2143
    @azhara.2143 2 місяці тому

    Mantap mas, terima kasih ilmunya perbanyak konten 3d react native mas khususnya r3f

  • @macon5696
    @macon5696 2 місяці тому

    Looks good, but I’d suggest implementing it with React Native Skia and adding a clip property to change the tab icon color when the circle moves, not when pressed. It doesn’t look great when the user presses the button, and it disappears because it becomes the same color as the tab bar, but in general - cool

  • @angerbadge773
    @angerbadge773 2 місяці тому

    can we do that with expo router

  • @ramiwang
    @ramiwang 2 місяці тому

    Thank you, that's very helpful.

  • @ChippalaLaxmi
    @ChippalaLaxmi 2 місяці тому

    Can I do the same in react native js

    • @rakhawibowo
      @rakhawibowo 2 місяці тому

      Of course, you can do the same using React Native JavaScript. You just need to change the extension from .tsx to .jsx and remove all type definitions

  • @user-hx1jw2zw4h
    @user-hx1jw2zw4h 2 місяці тому

    can this be achieve using javascript only

  • @DariaBrinza-w7u
    @DariaBrinza-w7u 2 місяці тому

    Hi! Thanks for the video!! Have a question, what is the difference between getting contentOffset using useAnimatedScrollHandler, and without, strait through callback function passed to onScroll in FlatList?

  • @abdulhaseebkhan168
    @abdulhaseebkhan168 3 місяці тому

    Great video

  • @freeinformation7877
    @freeinformation7877 3 місяці тому

    Thank you very much for your source code dude, I appreciate it

  • @ricardocalixto4472
    @ricardocalixto4472 3 місяці тому

    Thanks for your content!

  • @rishujaryalls8325
    @rishujaryalls8325 3 місяці тому

    How to display these toast over <Stack.Screen name={ROUTES.ACCOUNT_SCREEN} options={{presentation: 'modal', }} component={AccountScreen} /> In this case it opens behind the modal not over the modal

  • @ricardocalixto4472
    @ricardocalixto4472 3 місяці тому

    How can we add tooltip at the bar when selected?

  • @antonioteixeira1779
    @antonioteixeira1779 3 місяці тому

    ❤❤❤❤❤❤❤❤❤

  • @ricardocalixto4472
    @ricardocalixto4472 3 місяці тому

    What if I want a horizontal scrollable chart? How would it be possible? Thanks for the content, you are awesome!

  • @YuriiLutsyk0304
    @YuriiLutsyk0304 3 місяці тому

    Coooool

  • @ashraf6625
    @ashraf6625 3 місяці тому

    permisi mas, saya mencoba mengikuti tutorial mas, tapi saya mengalami kendala saat install React Three Drei karena dependency conflict dengan Three js 🙏

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Boleh tau versi Dari React Three Drei sama Three nya mas ?

    • @ashraf6625
      @ashraf6625 3 місяці тому

      @@rakhawibowo React Three Drei versi 9.106.1, Three versi 0.165.0, saya lihat di reponya react three drei dependency nya pakai three versi "three": "^0.151.0" mas, Terimakasih udah balas mas🙏

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      @@ashraf6625 Saya coba dengan versi yang sama, di saya normal mas, nggak ada dependency conflict

    • @ashraf6625
      @ashraf6625 3 місяці тому

      @@rakhawibowo boleh liat package.json nya mas?, btw saya ga pakai expo buat install react nativenya mas, terimakasih 🙏 Edit : Udah bisa mas, terimakasih ya mas 🙏

    • @rakhawibowo
      @rakhawibowo 2 місяці тому

      Sip mas sama sama, saya yang sekarang kena conflict peer dependency hahaa, saya sudah coba open issue di reponya R3F

  • @remziogultum6697
    @remziogultum6697 3 місяці тому

    amazing content

  • @collinsk8754
    @collinsk8754 3 місяці тому

    Really good 👏👏

  • @BarakerZeonlist
    @BarakerZeonlist 3 місяці тому

    you deserve

  • @jayr44402
    @jayr44402 3 місяці тому

    Can you teach me how to do animation pull refresh?

  • @HaakonJacobsen
    @HaakonJacobsen 3 місяці тому

    Great video, thanks for sharing!🙌

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Thanks for watching 🙌

  • @pascalnouma1962
    @pascalnouma1962 3 місяці тому

    king

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Thanks bro 🔥🔥🔥

  • @amitmehta8554
    @amitmehta8554 3 місяці тому

    Will it impact on app size, if yes then how much

  • @Clytax
    @Clytax 3 місяці тому

    But now when I change the min or max this new value becomes the boundary. so if I had 50 as min then select 60 as the min value, the next time I open the filters with the slider now 60 is the new lowest possible value :/

  • @akbarchannel2601
    @akbarchannel2601 3 місяці тому

    selalu, keren mas!

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Terimakasih mas 🔥🔥🔥

  • @akhari.dastak7029
    @akhari.dastak7029 3 місяці тому

    bro how much ex do you have?

  • @kinggrey2511
    @kinggrey2511 3 місяці тому

    Looks amazing 🤩😍🎉

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Thank you so much broo 🔥

  • @shahhussain5563
    @shahhussain5563 3 місяці тому

    Can we use widows laptop to build this ?

    • @Dira_1111
      @Dira_1111 3 місяці тому

      Yes

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Yes of course you can use it on Windows

  • @sefailyasoz
    @sefailyasoz 3 місяці тому

    I'm trying this with an Expo project but it still messes the whole thing, have you ever experienced a problem with this transition in an Expo app ?

  • @aabc0007
    @aabc0007 3 місяці тому

    Thanks a lot bro, subscribed😄

    • @rakhawibowo
      @rakhawibowo 3 місяці тому

      Thank you so much for the sub 🙌

  • @WilliamPale-dh1qm
    @WilliamPale-dh1qm 3 місяці тому

    Thank you for this master tutorial!! I'm able to reproduce this component on my app but how to manage header background color and opacity when the main component (screen) is in a Stack Navigator?

  • @KB9191
    @KB9191 3 місяці тому

    First of all, thank you for this content. When I try this for another model, I get this error --> Unable to resolve "../assets/Models/Model.glb" from "components\Model.tsx". How can I solve it?

    • @KB9191
      @KB9191 3 місяці тому

      now I getting this error--> TypeError: gl.texImage3D is not a function (it is undefined)

    • @user-ux1ks2dq2e
      @user-ux1ks2dq2e 5 днів тому

      did u solve it!!?

  • @an.aminnazari
    @an.aminnazari 4 місяці тому

    👏👌

  • @an.aminnazari
    @an.aminnazari 4 місяці тому

    👏👌

  • @mosakibb
    @mosakibb 4 місяці тому

    Love the video. Just Amazing, Thanks