How to import a 3D model into React application using React Three Fiber

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

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

  • @patrick_pan
    @patrick_pan  Год назад +2

    sketchfab.com/3d-models/earth-f7a76c63ff1846afb2d606e5c8369c15

  • @simplebutamazing3613
    @simplebutamazing3613 5 дней назад

    We've been working on a software for the past three years and I had the idea of including a model in our website. Your idea brought it to life. Great video, thanks for the content!

  • @abdulakhadturgunaliev
    @abdulakhadturgunaliev Год назад +4

    I have no idea why you have so less subscribers and likes but I personally trust that you worth more than you have. I could not import 3 d models for during december not knowing how to do this but you bro helped me. Maybe You do not work in Google or somewhere else but you are the one who solve problem of thousands of people and making them happpy. Thank you so much i appreciate you so much. Please keep going brother.

  • @thewisdomwithinit
    @thewisdomwithinit Год назад +1

    Your video is so helpful to me man , great work . Waiting to watch and learn more of react three fiber from you

  • @rallysahil
    @rallysahil 3 месяца назад +1

    Thanks Patrick for the Video.
    Query-1 : How to listen click events on the model ?
    Query-2 : How to Explode the model if it has that Provision ?

  • @matheusasilva1170
    @matheusasilva1170 2 месяца назад

    Your videos are awesome! I'm picking up a lot from them, thanks a ton.
    I have a question: I'm a bit lost on how the "eafc kit creator" website generates the kits. Could you explain how it works?
    Thanks!

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

    Very underrated youtuber

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

    Thank you for the tutorial man!
    really helpful!

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

    how do u build it tho

  • @vxltured2837
    @vxltured2837 4 месяца назад

    How do you make it more zoomed in?

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

    suppose i downloaded a 3d model with animations but whenever i render it it remains atatic how can i trigger those animations?

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

    Would I need to do anything different if I'm using Expo? I'm new to all this and everything points to why I should use Expo but almost all resources I find still use the CLI. I tried following a similar vid but couldn't get it to work.

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

    this helped with my portfolio building and i appreciate this video very much 💙

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

    Hi Patrick, great video.

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

    how to position right or center?

  • @анче-у2ш
    @анче-у2ш 10 месяцев назад

    When you use app.css - you taking canvas {} - where do we have it? Cuz I want to make it with tailwind...

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

    how can I add text on top of the model? if i write in canvas style position absolute it doesnt work

  • @sarveshghildiyal9365
    @sarveshghildiyal9365 8 месяцев назад +1

    Good job making this

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

    Great video, so clear and concise

  • @Marfking08
    @Marfking08 11 месяцев назад

    Great video and explanation, keep it up!

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

    my model doesn't includes textures folder after extraction

  • @КристинаСорокина-б2л
    @КристинаСорокина-б2л 10 месяцев назад +1

    Thank you! This is exactly what i needed! :) Also, it would be super awesome if you could show how to animate clicks on 3d models like this and make the React app listen to the click events. That's what i am trying to learn next.

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

      Do you have an answer to your question now ? Pls share.

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

    thanks from Brazil... You really help me

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

      olá, o meu está dando erro, poderia me ajudar ?

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

      o erro é na hora de transformar o arquivo gltf para jsx

  • @isabelladavila3834
    @isabelladavila3834 4 месяца назад

    SO SO HELPFUL THANK YOU

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

    loved it. good job

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

    hi patrick i get a problem : "Three.js and useGLTF hook pathing problem" i dont know that's what AI tell me , the error is: "Could not load /2021_volkswagen_golf_gti.glb: JSON.parse: unexpected character at line 1 column 1 of the JSON data" and i use both .gltf and .glb but i steal see the eror im trying 5 days to solve it ? please give me solution ❤

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

      @NukelimerCodes yeah , just put gltf files in "public" folder

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

    i am getting little loading issue in mobile resolution how to fix it

  • @svirskyevgeny3723
    @svirskyevgeny3723 4 месяца назад

    Thanks, man. It is helpful!

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

    is there any specific reason for placing Earth.jsx in public folder?

  • @frankyouze3581
    @frankyouze3581 2 месяца назад

    The requested module /public/Earth.jsx does not provide an export named Earth error while I made sure to put the 'export default'

  • @VukIgnjatovic
    @VukIgnjatovic Год назад

    Loved the video man! I was wondering where could I find 3d valid gltf files. On sketchfab I often get gltf files which contain errors

  • @garvitbansal9353
    @garvitbansal9353 8 месяцев назад +1

    bro i can't import the file from the public folder and the ide doesn't give any suggestions for that also.. please help!!!!!

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

    It is not working i am doing it in react js and have a problem not being able to load outside of src

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

    Thank you. It helps me a lot.

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

    Tysm for ur tutorial

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

    This video helped, Thank You.

  • @aminebouzaid5971
    @aminebouzaid5971 11 месяцев назад

    Wow , so clear thanks bro 🤍

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

    Not able to import earth.jsx, shows can not find

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

    Can't create the Earth.jsx with the command. I must have something broken in my installation.

    • @ranielcyrusechon1159
      @ranielcyrusechon1159 4 месяца назад

      did you able to fix it? it still can't generate the earth.jsx file. can someone help?

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

    love you man ❤❤❤❤

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

    THE BEST! thank you!

  • @KRSNABhaktiAnimated
    @KRSNABhaktiAnimated 4 месяца назад

    Very helpful!

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

    you are the best bro ......

  • @harshvyas891
    @harshvyas891 11 месяцев назад +1

    Could not load earth.gltf: Unexpected token '

    • @AgileDesigner-pv8dm
      @AgileDesigner-pv8dm 11 месяцев назад

      Same issue man here

    • @AgileDesigner-pv8dm
      @AgileDesigner-pv8dm 11 месяцев назад

      if you find any solution must tell me

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

      change your browser, it might be the issue!

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

      same issue, anyone found a solution

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

      seems like its some security restriction, if i find something ill post it

  • @wotizit
    @wotizit 4 месяца назад

    Make more!

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

    please we want it in tsx not jsx

  • @SalvaKaraka
    @SalvaKaraka 11 месяцев назад

    Sos capo compa!

  • @YuliyaS-t7d
    @YuliyaS-t7d 4 месяца назад

    🔥🔥🔥

  • @PatManfra
    @PatManfra 11 месяцев назад

    This needs the source code. This is sick.

  • @bekizodcancer3657
    @bekizodcancer3657 Год назад +1

    could you pin the source code please

  • @wotizit
    @wotizit 4 месяца назад

    1 guy dislike hater smh

  • @mausomdas9600
    @mausomdas9600 Год назад

    Thanks man for this amazing video can I get your LinkedIn