React Native 3D Three.Js | Load 3D Model With React Three Fiber and Drei

Поделиться
HTML-код
  • Опубликовано: 15 сен 2024

Комментарии • 92

  • @maq3009
    @maq3009 6 месяцев назад +1

    Extremely helpful. We need more React Native and 3JS and Fiber tutorials.

    • @rakhawibowo
      @rakhawibowo  5 месяцев назад +1

      Thank you so much bro!! Glad if this video can help you!!!

  • @Stepsovich
    @Stepsovich 4 месяца назад +1

    Heya! I've been facing an issue, whenever I do everything up to loading the model into the scene, I get the error: "Property ''Image" doesn't exist" thrown by the gltf loader, any idea how to fix it?

  • @K.Huynh.
    @K.Huynh. 4 месяца назад

    Thank you for sharing!
    this tutorial is so cool!
    I love it.

    • @rakhawibowo
      @rakhawibowo  3 месяца назад

      Thank you so much broo!!!

  • @kushangshah980
    @kushangshah980 14 дней назад

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

  • @KB9191
    @KB9191 3 месяца назад +2

    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 6 часов назад

      did u solve it!!?

  • @saim4556
    @saim4556 6 месяцев назад

    thanks for this amazing video you just got one more subscriber... pls make more videos in cli..

    • @rakhawibowo
      @rakhawibowo  6 месяцев назад +1

      Hey, thank you so much for supporting this channel 🔥

  • @iliyanalinski9385
    @iliyanalinski9385 5 месяцев назад

    What if I want to use multiple 3D objects and change the visualization by just passing different object path by props?

  • @Wildenza
    @Wildenza 9 месяцев назад +1

    Hello!
    Managed to follow up the tut until 16:30 , for some reason the project loads succesfully, but when I use the canvas, the whole text dissapears & no model
    If I use () the text appears & no model.
    Any clues ?
    Would really appreciate any tips

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      hello, does the model appear before you set the scale and position ?

    • @Wildenza
      @Wildenza 9 месяцев назад

      @@rakhawibowo Nope, not at all :/

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      @@Wildenza Make sure the parent style (modelContainer) is correct, and check if there are any error messages

    • @Wildenza
      @Wildenza 9 месяцев назад

      @@rakhawibowo Managed to sort it out in the end.
      Works :)

  • @TMDX-j2q
    @TMDX-j2q 10 месяцев назад

    Thank you! Your content is great!

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      hey thank you very much, I really appreciate it!!!

  • @sofiaignaciazambranomericq5937
    @sofiaignaciazambranomericq5937 Месяц назад

    thank you!!!!

  • @hayesism
    @hayesism 7 месяцев назад

    Great video!
    I don't have a metro.config.js file after installing Expo or Three. Do I need to create it or is it no longer required?

    • @rakhawibowo
      @rakhawibowo  7 месяцев назад +1

      Hey thanks!!!
      If you're using Expo, you can follow the docs to generate the metro.config.js file docs.expo.dev/guides/customizing-metro/

  • @YuriiLutsyk0304
    @YuriiLutsyk0304 10 месяцев назад

    It was very interesting!!!!!

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      hey thankyou so much for watching!!!

  • @666thales666
    @666thales666 10 месяцев назад

    Great job! How can I apply a texture to part of the object? Do you know how I do this? I would like to wear a shirt using a texture on a mannequin.

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      hey you can use the useTexture hook from Drei to load the texture separately, maybe you can give me an example for the 3D model so I can try it ?

    • @666thales666
      @666thales666 10 месяцев назад

      @@rakhawibowo this idea is just in my mind. I will try to implement and go back to give a feedback.

  • @inamulhasans9461
    @inamulhasans9461 10 месяцев назад

    Great content 🎉❤

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      Thank you so much broo!!!

  • @eddyjens4948
    @eddyjens4948 8 месяцев назад

    Wow, insaane content!

  • @user-gl8ux9rv6r
    @user-gl8ux9rv6r 6 месяцев назад

    very helpful!

  • @imam_robani
    @imam_robani 10 месяцев назад

    First bro.
    That's amazing !!!

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      Hey, thank you very much for always supporting this channel broo, I really appreciate it!!!

    • @imam_robani
      @imam_robani 10 месяцев назад

      @@rakhawibowo sure, make shared screen animation bro

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      @@imam_robani hi, thank you for reminding me to create shared elements, but for now there are some bugs from the Reanimated side, so I'm still waiting until the bugs are resolved

    • @imam_robani
      @imam_robani 10 месяцев назад

      @@rakhawibowo alright, thanks bro

  • @stilljunior1764
    @stilljunior1764 6 месяцев назад

    after adding config.resolver = {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
    }
    have an error Unable to resolve "./vendor/react-native-vector-icons/Fonts/AntDesign.ttf" from "node_modules/@expo/vector-icons/build/AntDesign.js"
    pls, help me

    • @rakhawibowo
      @rakhawibowo  6 месяцев назад

      Hey, make sure you also include the ttf extension in the assetExts

  • @MaheepSingh-tn6xj
    @MaheepSingh-tn6xj 6 месяцев назад

    So it only works with expo? what about CLI?

    • @rakhawibowo
      @rakhawibowo  6 месяцев назад +1

      Hey, in this video, I used the CLI, but to use React Three Fiber, you need to install Expo modules.

    • @MaheepSingh-tn6xj
      @MaheepSingh-tn6xj 6 месяцев назад

      @@rakhawibowo Got it. Thanks

  • @Gaurav.Kumawat
    @Gaurav.Kumawat 10 месяцев назад

    Niceee

  • @DieghoxCr7
    @DieghoxCr7 10 месяцев назад

    Has anyone been able to upload the model with Expo? I have the following error: ERROR TypeError: Cannot read property 'extractUrlBase' of undefined, js engine: hermes

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад +1

      Hey I just tried it on Expo, the model loads fine for me

    • @DieghoxCr7
      @DieghoxCr7 10 месяцев назад

      @@rakhawibowo which drei version and expo sdk are you using?

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      @@DieghoxCr7 I am using Expo v49.0.15, Fiber v8.15.9 and Drei v9.88.9

    • @DieghoxCr7
      @DieghoxCr7 10 месяцев назад

      @@rakhawibowo I have the same dependencies, but I get that error

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      @@DieghoxCr7 Did you use the same model as in this video or did you use your own model ?

  • @zainkanji4737
    @zainkanji4737 10 месяцев назад

    Error: Cannot find native module 'ExponentGLObjectManager' I am getting this error followed all the steps can u help me?

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      Hey, I'm sorry, I'm unable to reproduce your error, Can you inform me about the versions of React Native, Expo, Expo GL, Fiber, and Drei that you are using?

    • @zainkanji4737
      @zainkanji4737 9 месяцев назад

      @@rakhawibowo Like i Have Latest Version of everytinng cause i created my Project last week and is based on CLI not expo

    • @zainkanji4737
      @zainkanji4737 9 месяцев назад

      @@rakhawibowo npm install three @types/three @react-three/fiber , npm install three @react-three/fiber , npm install @react-three/drei
      All this is required or am i missing someting?

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      @@zainkanji4737 you need to install Expo Module and Expo GL to use React Three Fiber in React Native, you can follow at 0:33 or on React Three Fiber docs docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native

    • @zainkanji4737
      @zainkanji4737 9 месяцев назад

      @@rakhawibowo like this will work in CLI project also?

  • @ahsanjaved4196
    @ahsanjaved4196 10 месяцев назад

    I have tried it but I am making native cli project it is not loading there

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      hey can you tell me which version of React Native, Fiber and Drei you are using ?
      does it happen on Android or iOS ?
      and is it on a Real Device or on an Emulator/Simulator?

    • @ahsanjaved4196
      @ahsanjaved4196 10 месяцев назад

      @@rakhawibowo i am using latest versions of all and it's real device android.

    • @ahsanjaved4196
      @ahsanjaved4196 10 месяцев назад

      @@rakhawibowo i have tried so many times but still no results

    • @ahsanjaved4196
      @ahsanjaved4196 10 месяцев назад

      Basically model is not showing on screen

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      Are you using the same model as in this video?

  • @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 2 месяца назад

      @@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

  • @YuriiLutsyk0304
    @YuriiLutsyk0304 10 месяцев назад

    @rakhawibowo i'd like to see an implementation of the endless list with recycleListView

    • @rakhawibowo
      @rakhawibowo  10 месяцев назад

      Hey, thanks for the suggestion, I'll add it to my list

  • @spmina12
    @spmina12 9 месяцев назад

    Hey thanks for your video.
    Can you please share your build.gradle, app/build.gradle, gradle-wrapper.properties and package.json so we can check gradle, kotlin and jdk version

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      Hey thankyou for watching!!!
      I'm using React Native version 0.72.7, JDK11 and you can find the information you ask about in this repo github.com/Rakha112/react-native-animation

    • @spmina12
      @spmina12 9 месяцев назад

      Thanks so much but I cannot build the app on my android device @@rakhawibowo . I see you updated the repo very recently and it has compatibility issues related with kotlin, gradle and java versions in my pc. I am stuck and looking for suggestions

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      Can you tell me which version of React Native and JDK you are using? and are there any error messages that appear?

    • @spmina12
      @spmina12 9 месяцев назад

      I have tried upgrade and downgrades@@rakhawibowo from compatibily matrix. When I create a new project and install dependencies, the error is
      export default function Model(props: JSX.IntrinsicElements['group']) {
      > 29 | const {nodes, materials} = useGLTF(require(''../assets/Model.glb')) as GLTFResult;
      |
      error: Error: Unable to resolve module ../assets/Model.glb from /Users/pinarunsal/Developer/react/native/protatip/gitAnim/test/AwesomeProject/src/components/Model.tsx:
      I am sure of the path.
      when I try to import the .glb path, same error

    • @rakhawibowo
      @rakhawibowo  9 месяцев назад

      @@spmina12 Make sure you have modified your metro.config.js file as in the documentation