Create A 3D Model Showcase With React, Three.js, and React Three Fiber

what's going on guys it's Cooper codes and in this video we are going to create this 3D model showcase using react3.js and react 3 fiber the Showcase allows you to load in a 3D object and then you can use the controls to kind of move around and look at all the different aspects of the object let's get into it we can get started by downloading this glb file in this GitHub repository I made I'll link this in the description and to download the stuff in this repo you can just go press code here and then download zip I'm going to get started by going to an empty folder in Visual Studio code and creating a react application by saying npx create Dash react Dash app with the folder name client once that react app is created we can go into the client folder by saying CD client and we can npm install two different libraries which we're going to need for 3.js so we can say npm install at react-3 fiber this is the reactory fiber which is the main chunk of the 3.js code we're going to need and we're also going to install react-3 slash D REI the drei library has a bunch of helper functions which make all the 3.js functionality way easier to use before we get coding you're going to want to take that glb file and then bring it over to your public folder inside of your react application and I'm just going to rename the file to bmw.glb we can then move to the source folder where we're going to work with the app.js we're not going to need any of the boilerplate code so we can remove this entire div we're also not going to need these Imports so we can get rid of that as well so let's get started with importing everything we're going to need for react-3 we can import the canvas element from at react Dash 3 fiber and as we use these I'll explain what they are we're also going to import the use gltf the stage and also the presentation controls and these are helpers from the at react.3 drei we can get started by creating a functional component to represent our 3D model we can say function model the props we might want to pass into this component so in order to load in our 3D object we can get the scene property out of our glb the scene is pretty much what the 3D object is and we can use the use gltf hook with the path to our file slash bmw.glb for example this is called a react hook and it allows us to use functionality within 3.js for example to load in the file but once we get the scene property out of loading in the file we pretty much have access to the object we can now return something called A Primitive and this primitive has access to the object property which means we can show a certain object to our 3.js Canvas OR stage for example and we can pass in the object that we just loaded in with the used gltf hook and also we can use a spread operator to pass in any props we pass into the model now we can get working on creating the canvas that our 3.js is going to render to which is that canvas that we pass in above right here the canvas has a bunch of different properties which allow us to customize how the actual 3D gets rendered for example we can customize the device pixel ratio with the DPR property which is going to be set equal to an array of one comma two we also want to render Shadows for example where we want the option to even though in this video I'm not going to be doing that we also want to set unique properties to what the camera is going to look like for example we can pass in the fov of 45 you can change this to change your fov if you've ever like played a video game it's going to kind of do the same thing it'll change the fov and so this canvas is pretty much a regular HTML canvas at the end of the day and so we can actually use the style property here to change the style I want this canvas to take up the entire screen and so an easy way to do that is to say position of absolute within our canvas we can also use certain jsx elements such as color when the canvas sees a certain color it's going to apply whatever properties we decide to do with this color for example we want to attach a color to the background so we can use the attach property and set it equal to background you can also set the arguments to show that we want a color of for this case I'm going to do a one zero one zero one zero which is like a color that's pretty much close to Black this means our canvas is going to have pretty much an entire black background we can npm start our application to see what it looks like so far so if you see a completely black screen that's great news that means that we have a canvas and is taking up our full screen but there's no 3D elements actually inside of it we can use a helper from the drei library called presentation controls presentation controls allows us to create a very simple 3D model render for example where we're able to just look at one to 3D object it also gives us the ability to drag and kind of move around the object so we can see it from different angles as I showcased in the beginning if we want to change the speed in which the user is able to kind of drag around the object we can say speed is equal to 1.5 was something that I felt was comfortable but you can change this to however you prefer I'm also going to use the global property I wouldn't worry about this one too much but pretty much you can drag anywhere on the screen and it won't move our object that isn't by default if you don't have the global property you have to drag directly on the object to move things around for example we can also set the initial camera zoom a one I liked was 0.5 and that's the great thing about all these different properties is you can change the values around and get a different look and different feel for whatever you prefer to do we can also set the polar property which is pretty much the bounds in which we're able to move the camera I did a negative 0.1 here which means we can't really go under the car that much but we can go all around the car and we can get that effect by saying math dot pi divided by 4. within our presentation controls we're going to need something called a age the stage allows our object to kind of sit on something if that makes sense and we can also set an environment for the certain stage I'm going to set the environment to null but what the environment for the stage does is it has a bunch of different presets you can use that's going to have different lighting options we'll explore some of these presets at the end of the video then we can load in our model component which we created at line four and we're going to set the scale of the Primitive which is coming in to 0.01 and to explain how this scale property is working we have this functional model component and are passing in the property of scale this scale isn't going to go into these props when you load in a model and then when we create this primitive what's happening is we're actually adding on the scale is equal to 0.01 on top of this primitive and so that's what this dot dot props is doing is it's kind of converting all the properties from this model here and attaching them to this primitive here alright let's go check out the application amazing so we have access to the model and we're able to move around and like I said before can't go under the model currently and so the lighting is defined by that one environment property if we go back to our code we can see that if we have this environment there's a bunch of different options let's see the sunset option for example so put in Sunset as a string here then reload your application you'll see we're getting a way different effect and it's actually offset to the side so we kind of have this more Sunset type effect on the BMW so you can mess with those presets and kind of see what looks the best for whatever object you're loading in and that's also a huge emphasis to this tutorial is that you guys can load in any glb if you're interested in adding a little bit of 3js functionality to a different react application here's some advice for you you can change the size of the canvas to whatever you want so for example I can go in here I'm going to keep the position absolute but I can set the width equal to 500 pixels and also the height is equal to 500 pixels this is going to make that little square that our 3.js is living in 500 by 500 so save this and go back to your react application and you'll see we still have the BMW and it's sitting here so you can imagine in a more advanced site you could have the BMW to the left that you can drag around and then maybe some text to the right that is talking about you know the different specs of the BMW for example hopefully this video was helpful if you guys are interested in learning more about 3.js and possibly even integrating 3.js with other design libraries kind of like I just talked about let me know in the comments for sure alright thanks so much for watching

Channel: Cooper Codes

Views: 12,230

Keywords: threejs getting started, threejs beginner tutorial, threejs course, threejs, threejs tutorial, javascript, react three, react three fiber, react three fiber tutorial, react hree.js tutorial, react three.js tutorial, threejs react, three.js react, three.js, 3d model showcase, show 3d model react, react 3d model, 3d models with javascript, three.js car showcase react, car showcase three.js, car showcase react three.js, react three.js fiber

Id: QaRIHrRclVk

Length: 8min 5sec (485 seconds)

Published: Thu Oct 13 2022