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

hi guys welcome to Patrick Pan channel in this video I'm going to show you how to import a 3D model into your react application using react 3 fiber let's get started all right let's start by creating our react project so I'm going to using Viet okay so let's CD to desktop and you can use this command npm create vit at latest okay hit enter and name our project so I'm going to use react d3d Das model hit enter and select a framework so we are going to using react and using JavaScript okay next cd2 react d3d model folder and then use this command to install all dependencies npmi hit enter and just wait a second okay so next we are going to open our project into vs code by using this command code dot hit enter okay and next we have to install the react 3 fiber Library so let's open Terminal in BS code and using this command npmi 3 and add react das3 SL fiber and the last one is ADD react Das three slash dry okay hit enter so this is important package so we can import our model into our reactj all right next let's go to this website sketch Fab so I'm going to put this link into description so you can go and download this model so you can go to this download download button so we're going to using this format gltf okay hit download button okay after finishing download so you can go to this sa file and double click to extract this file and go to this earth folder so inside this folder we got scene. bin file scene. dltf file and Tes folder so let's copy this file okay okay and go back to our project and I'm going to put this file into public folder so I'm going to open this inviter go inside public folder and paste this file here okay next let's go inside public folder and I'm going to rename this file into a new name so I'm going to call it Earth okay and next one scene. bin we are going to do the same as a g gtfl okay so we are going to rename to earth. bin like this and next go to earth. gltf file and then we will go to this buffer okay so you can search by using command F or contrl F in Windows and search buffer name as you guys can see here we have to change this URL name to earth. bin so we have to match this file as its name okay so we're going to change the default value to earth. bin okay like this and hit save and close this file so next we have to convert this gltf file into a jsx file or into a react component so we can use in our react application But first you have to access to public folder by using this command CD public okay and then you can use this command npx dltf GSX and followed by your earth. gtf file okay earth. gtf and then hit enter okay so as you guys can see here we got the earth. jsx file so click here and then inside this file we have to export default this component so if you don't use the export default it will error okay so just add the default keyword here and hit save and close this file okay so next let's create another terminal inside our vs code so you can click new terminal here and then we can use npm run def to run our project okay and let's go to this URL okay cool next we have to go to inside rrc folder and go to app.css so I'm going to get rid of this code and go to index .css okay we are going to do the same get rid of this code okay and then close it and go to app.jsx and get rid of this code here okay and next we are going to display our 3D model inside our app.jsx file so first let's import a suspend component here and next let's import a canvas component from react 3 fiber okay and next let's import and orbit controls component okay from react 3 dry and then the last one we have to import our Earth model okay so we're going to import Earth from I'm going to go back to our public folder and access our Earth component like this okay next go to our app component inside this return we're going to call or use this canvas component like this and then let's using this component suspense like this and we going to add a fallback prop and then we going to set its value to null so inside the suspend component we can use this Earth model inside this okay let's call the Earth component here and then you can go back to Chrome to see the result as you guys can see here we got our model display on our website but it's all black so how to fix this color problem okay so let's go back to W code so you can use this component it's called ambient light okay hit save and go back to Chrome as you guys can see here we have our Earth display with a color Okay cool so next if you guys notice here I can't click or interact with the Earth model model right so you can add this component Orbit Control so let's use this component okay Orbit Control like this and his save go back to Chrome so as you guys can see here you can drag and interact with our model Okay cool so next let's go to our app.css and I'm going to access to Canvas element and I'm going to set the height to 100 VH okay and use the is important okay hit save and go back to Chrome as you guys can see here we have our butiful Earth model display correctly okay but another thing that I want to let you guys know that we can add a environment so let's go back to our app.jsx and add the environment component here so basically you can import from react 3 Drive okay and then you can use the preset so I'm going to use um Sunset okay hit save and go back to Chrome as you guys can see here so our Earth feel more realistic okay so as you guys can see it has a light and next you can go to this component so you can use the intensity prop here and you can set the value of it like uh two okay so it's uh brighter so you can set the value as you want like 10 but it's too much bright okay so I'm going to use like 1.5 okay or you if you don't want to use you can remove this prop so when you're using this orbit controls component you can drag you can zoom in zoom out but if you want it to zoom in or zoom out you can using this prop it called addable Zoom so you can set it to false like this and go back as you guys can see you can't zoom in or zoom out but you can only drag this model okay and next let's add a background color so go to app. CSS I'm going to access to body tag and using the background color property and set to um slate gray okay cool and next you can add some information about our Earth planet okay so basically you can go to after canvas I'm going to create another diff and inside this diff I'm going to create H1 tag and type Earth and next go to the Google so I'm going to search the Earth and go to the Wikipedia okay and then I'm going to copy this information and create P tag so past the information there and next copy this information and create P tag paste it inside this P tag okay then I'm going to create a class name called container for our information and then go to app.css so I'm going to access to container class selector and set the Mac width to 960 pixel and using the margin zero Auto to Center our container and then using the pad one rim and set a background color to 333 and set the font color to white okay hit save and go back to Chrome as you guys can see here we have a beautiful information display here and I'm going to set the Border radius to like um 20 pixel okay and add more padding like two Rim okay now nice and if you guys can see here uh our canvas it's too long right so we can fix this by Shang this value to like uh 500 pixel like this okay and as you can see our Earth it looks small right so you can fix the Earth scale just go to earth. jsx file and go to scale I'm going to shange it to uh like three or 2.5 I think okay awesome we have our website that display the 3D model Earth that you can interact with and some information down here okay and next let's create the fooder component so I'm going to create footer. jsx file and inside this footer I'm going to create a P tag and we're going to type a copyright 2023 okay all right reserved okay that's it and then go to app.jsx and I'm going to import the fooder component from fooder and we're going to call it down here okay go back to Chrome okay let's uh add some style to our fooder go to app.css access to so actually I'm going to shame the diff tag to fter tag okay and access to this tag so I'm going to use the text Center padding one Rim background color 333 font color white okay hit save go back okay and let's add some margin top like two Rim okay but as you guys can see here we have to remove the default margin and pattern add in of the browser so let's go on the top and using the universal selector and reset the margin to zero and padding zero set the Box sizing to B box okay save go back all right cool and the last component that I want to let you guys know that it's a contact Shadow so you can add a shadow to our model so you can import the contact Shadows uh form a react 3 dry okay and then use this component below this environment okay and let's uh copy this prop and paste it in here and it's save go back to Chrome okay so nothing happened but I think it's uh we have to set the shadow position okay so we going to set the Y AIS like minus two I think okay but it's um very dark I'm going to use uh like [Music] 2.5 okay cool and I think we should change um the opacity like5 okay and scale to 50 nice I think it's uh it's okay now okay cool all right guys that's it about in this video that I want to show you guys on how to import a 3D model into react application okay I hope you guys enjoy this video and I hope this video is helpful for you guys that want to know how to import a 3D model inside a react application okay so if this video is helpful don't forget to like And subscribe and see you guys soon in the next video

Channel: Patrick Pan

Views: 990

Keywords: web development, programming, education, html, css, javascript, reactjs

Id: M5nt1GamB_g

Length: 15min 19sec (919 seconds)

Published: Mon Oct 30 2023