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

[@patrick_pan]

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

[@abdulakhadturgunaliev]

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.

[@simplebutamazing3613]

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!

[@decezanne]

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

[@prayushdave]

Thank you for the tutorial man! really helpful!

[@ssscnri]

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

[@OyeGoke19]

Great video, so clear and concise

[@jc_kirb]

You are incredible

[@Marfking08]

Great video and explanation, keep it up!

[@MuhammadYasirGhaffar]

Very underrated youtuber

[@sarveshghildiyal9365]

Good job making this

[@bharathraj4545]

Hi Patrick, great video.

[@danieldiniz9624]

thanks from Brazil... You really help me

[@MARZONHA]

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

[@MARZONHA]

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

[@rallysahil]

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 ?

[@svirskyevgeny3723]

Thanks, man. It is helpful!

[@isabelladavila3834]

SO SO HELPFUL THANK YOU

[@aminebouzaid5971]

Wow , so clear thanks bro 🤍

[@eishchandeal]

love you man ❤❤❤❤

[@akuma_ki]

loved it. good job

[@prashantkamble2837]

This video helped, Thank You.

[@raviel_0422]

Thank you. It helps me a lot.

[@matheusasilva1170]

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!

[@КристинаСорокина-б2л]

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]

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

[@RafiSadmanSakib]

you are the best bro ......

[@spb26]

THE BEST! thank you!

[@frankyouze3581]

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

[@hayesism]

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.

[@KRSNABhaktiAnimated]

Very helpful!

[@katyayiniChopra]

Tysm for ur tutorial

[@aminebouzaid5971]

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]

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

[@sushant3116]

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

[@utkarshsharma404]

By using useFrame hook of r3f. I think so..

[@анче-у2ш]

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

[@dokers2084]

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

[@SalvaKaraka]

Sos capo compa!

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

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

[@vishaalsajeevsjv]

Hey were u able to solve that?

[@suriya_619]

same , found solution?

[@garvitbansal9353]

@@suriya_619 nope

[@vxltured2837]

How do you make it more zoomed in?

[@mesokompjuterin5103]

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

[@mehmetkose1753]

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

[@garvitbansal9353]

my model doesn't includes textures folder after extraction

[@aichampionofficial]

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

[@ranielcyrusechon1159]

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

[@post_rot]

how do u build it tho

[@YuliyaS-t7d]

🔥🔥🔥

[@harshvyas891]

Could not load earth.gltf: Unexpected token '

[@AgileDesigner-pv8dm]

Same issue man here

[@AgileDesigner-pv8dm]

if you find any solution must tell me

[@jameshonour7661]

change your browser, it might be the issue!

[@silent7152]

same issue, anyone found a solution

[@silent7152]

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

[@ravitejailluri4939]

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

[@myriaquekoko4758]

how to position right or center?

[@wotizit]

Make more!

[@PatManfra]

This needs the source code. This is sick.

[@suriya_619]

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

[@lamarmohsen9582]

please we want it in tsx not jsx

[@bekizodcancer3657]

could you pin the source code please

[@wotizit]

1 guy dislike hater smh

[@adithyansreeni7491]

Thankyou🥲🫡❤

[@mausomdas9600]

Thanks man for this amazing video can I get your LinkedIn