Working with GLTF models in React.js: Build a product customizer with react-three-fiber

there is a growing trend among big brands to use 3d product configurators and customizers they had an exceptional custom experience of to the online shopping experience now what we're looking at here is nike is a shoe designer now you can you can zoom in zoom out and rotate the shoes and then also you can select particular areas and change the color so i can change the top to blue now i can change the laces to something like a red okay so uh and this is another example i i've got a pink hang back here now i can change the color of the leather to a blue or or a black or green okay so and you can also change the color for the uh the metal parts to silver uh or stainless steel so and i can zoom in and i can see the detail and look at it from different angles so in this uh video i'm going to be showing you how to use react 3 fiber to produce similar sort of a 3d user experience so i'm on the react 3 fiber uh document site and they've got some showcase uh sites or demos that you can look at they're equally uh brilliant okay so so in this demo i'm gonna be creating a shoe configurator or customizer where i can you can you can zoom in zoom out and look at the shoe from different angles and also there is a color picker for each some parts of the shoes so if i want to change the main color to something else i can click on the color picker and change it to say i'm going to change the the top part to a red okay and i'm gonna change the stripes uh to a blue okay and then i can change the soul uh to a orange color okay so as you can see uh you know it's changing the color as i change the color picker okay so this is what we're going to be building in react and react fiber and uh and we're going to be uh getting the the the actual shoe uh externally from a third party so uh we're not gonna design the shoe itself but we're gonna get a a file called a gltf file uh that that you can export from things like blender so what we will be covered is in this video is how to use react.js with react3 fiber to render manipulate 3d models how to interactively change properties of the 3d model and how to work with gltf file formats in react so if you like tutorials like this please subscribe to my channel and let's get started okay i'm in my vs code and i've already run npx create react app so i've got a standard uh a react app set up already so what i'm going to do is i'm going to just clean up some of the files so i'm going to delete things that i don't want and just going to simplify it a little bit so i'm not going to use i'm not going to be needing the logo dot svg i'm going to be uh deleting the app.css so i'm going to be putting all the uh css in index.css i'm not going to be needing app.test delete that so i've got app.js index css and index.js and also i don't need the tests setup tests as well okay so uh so i'm going to be using these three files app.jsxsjs and index.css and index.js okay now we're going to be also uh be needing to install uh 3js and all the associated uh dependencies uh to create this uh 3d shoe customizer it's going to be npm install 3 and also we're going to have at react hyphen 3 slash fiber and then we're also going to install a module called dre okay so it's a react at react hyphen three slash drain okay so once that is installed then we can continue with the rest of the application okay now that's installed uh we can carry on with the rest of the application okay so i'm going to go into the app.js and i'm going to do some cleanup here now um i'm not going to nee i'm not going to be needing the logo so i'm going to delete that and i'm going to not be using the app app.here so i'm going to be using the index.css so we're going to put everything inside index.css here okay so uh that's for the styling all right and also we're going to be importing uh the the other dependencies so so we're gonna import uh from react okay and we're gonna be using use ref and use state okay and then just put some space there it's gonna be import uh from uh it's going to be at react slash 3 and it's going to be fiber and we're going to be importing canvas okay so and then so canvas is uh what where we're going to be uh displaying the 3d models and things okay with fiber react fiber okay so then we're going to import uh from from uh oops here from trey so it's uh react at react slash three and it's tray okay so the tray module uh has eggs adds extra uh features uh two three fiber so it allows us to have uh what's called orbital controls or ob2 controls okay this allows us to rotate things and uh do various other uh stuff with uh mainly like the the camera and things okay so then we're also going to have we're going to use use gl tf okay so that's the module that we use to import models so you know the models will be created in something like blender or some other 3d editing package and within those packages you can export it out to different formats so one of the formats that three can handle is a gltf so we're going to be using that hook to load the module uh the 3d models okay now that we got our dependencies set up uh for using a three uh we can test this out okay so i'm gonna what i'm gonna do is i'm gonna go to the apple section and i'm gonna delete everything in between the app wrapper and then i'm gonna add a canvas okay and in between the cameras i'm going to have a mesh and inside the mesh i'm going to have a box geometry and it's going to be sorry box like box geometry and that's and that will have um another attach equals to that tree and then uh we're gonna have arcs which is equal to open close curly brackets and it's gonna have an array and this is going to be the position for it so two comma two comma two an extra corner there all right so this this should uh and also in the mesh i'm going to have a ref equals ref okay so we're going to have a i'm going to have a constant that is oops equals to okay so we're going to have a constant that is declared with a use ref so constant ref equals use ref open close bracket so so this will allow uh three to uh render 3d objects okay so we're going to render the 3d objects there okay so this is a basic sort of uh uh setting to test you know your three configurations so if i save this and i go to terminal new terminal then then just do npm run start so we start the server if i go to the browser okay so what we what we're seeing is uh we've got a little square there so so this is actually a cube so the box geometries is actually you know uh how to write what you use to render cubes okay so it's and it's given the size uh the position two to two okay so so we know that it's displaying into square because we only see in the front face of it uh because we we don't have any lighting or cameras and things like that so this is just the basic settings to test this out so we know that's working okay next we're gonna need some styling and some uh boilerplate markup uh for our application so i've got something set up already in the code pen so what i'm gonna do is i'm gonna copy this over so this is what it's going to look like so it is basically a card with a sort of a panel where we can display our product and then we have a color picker chooser that you know you can choose a color for the main stripes and soul so as i'm doing here we can each one will have its own color picker so you can choose three different colors there okay so the markup is basically you know i've got a wrapper there and i've got a card section which is the whole card here and then within the card i've got you know color chooser section which is here and the color choose chooser has sort of a three imports input fields and these input fields are of type color now this is what makes it a color picker so this is a the basic html color picker okay so so this uh you know when you choose a color you know you can um you can set an event handler to pick up the value then you know feed into your react application so that's how it's gonna work okay so it's a basic color picker here okay so and in the styling um you know it's just basic sort of you know i've got reset styles there and we've got a sliding for the wrapper which is you know minimal height 100 view height and displays flex and you know it's all centered uh then i've got the card uh starting there uh you know it's got it's got height and border radius and some box shadow going on there and the product canvas is is the white area that's where we're going to display the the product or the the the model okay so it's just got you know width and height and uh background color and some box shadow thing going on there again it's got a board radius zero okay and then i've got in the color section is you know the display flex and direction row and and some padding for the div okay so that's basically it so what we're going to do we're going to copy this over first okay so i'm going to copy over the css okay so i'm going to select all so i'm going to leave this link in the comment section so that you can copy the styles from here okay so i'm just going to copy the css and go back and i'm going to copy it into the index.css so i'm just going to replace that okay so let's say that then i go into app.css i'm in there but css here now i'm going to delete uh this stuff that i've had there okay then i'm going to delete that constant ref i don't need that that's just for testing so i deleted all the testing stuff here so i'm going to go back to the code pen and then copy the markup html markup okay and go back and paste it in between i'm just gonna tap okay so okay that's better okay so uh so i've got the markup in there now and as i said before we're gonna be uh putting uh uh three 3d model in between uh the well this product canvas uh wrapper okay so that's where we're gonna be doing the 3d uh model uh we're gonna be displaying it there okay so we're gonna have a canvas there oops capital c canvas okay so and this is where we're gonna render the 3d model now i'm gonna just um rename the class the class name so i'm just gonna say uh so it's jsx compatible okay so i'm gonna change that and there's another one somewhere here okay class name okay so that's uh there's no other classes there okay so that's done okay now if i save this and go to the browser okay so uh so i've got my card uh set up nicely and i got the color pickers so the color pickers uh you know the pop-up will appear but it won't change the cut uh the color than that on these panels okay because it's because it's jsx that the values won't change uh on on the on when you change it okay so um so this is working right so now we're gonna wire up uh our model and uh and get these color picker working as well okay okay earlier we uh tested this uh uh the canvas uh with uh uh with a sort of basic uh cube model okay so now um you know with three uh react three fiber you can you can create these sort of simple shapes but to uh to to to create uh uh you know realistic uh 3d objects like a shoe or you know a table or things like that uh you need to have sort of professional know-how how to create these things and it's beyond sort of you know a developer's skill set okay so what i'm going to do is i'm going to go to a site called well a github repository for kronos group and they've got a whole lot of models uh realistic models developed by a professional 3d artist so you can you can use these models at in your application for sort of educational purposes okay so i'll leave the link in the comment section uh so that you can have a look at it okay so basically you know the uh we you know if you look through it you know you got all these sort of models for like uh you know realistic bottles and uh all these uh cubes with different textures and uh gadgets and toys and uh all sorts of you know even animation so what we're gonna look at is a shoe model okay so to go down okay this is the this is the model that we're gonna be using for our demo okay and if i click on the variants okay so uh so it's usually we're gonna be using the gltf format okay so and it comes with uh these sort of uh different files and uh you know uh the main one will have uh extension gltf okay it's that one and uh and if you look into it you know it's like a json file there if you so it's like a big day so far and that consists of sort of a different uh layers of the the 3d model so you know you'll have the soul and the main part and you have the stripes and things like that so uh so so a bit about the gltf format okay and they have a sort of a tutorial here that goes through it so basically it's a json structure okay and this is sort of the structure of the the the json file okay you have a scene and you have a node and you have a mesh and within the mesh uh you know you have accessors and buffer material texture so these are sort of the layers of the model and uh you know it even has information about animation and skin so this is the structure and usually you know you can you can inspect that file and uh look through it but uh you find it you'll have a difficult fine time to sort of you know find out what's what okay so that's the general structure okay so so you can see from the gft they've got a little sample here so you got the scenes nodes and cameras and then animations and buffers and it also has a binary file okay so associated with this and it's got some jpeg files and these are for the textures so uh so this is this gives you sort of you know more 3d life like sort of a effect when you apply these uh jpeg files to it as well so the binary files will have some raw data about uh you know the the actual geometry of the the shape the animations and skins and things like that so that that's the general sort of you know uh outline of you know what all these files are for so usually you you'll create these files in blender and export it and you know in in gltf format so so these things have already been done so we're just gonna use uh the outputted file okay so so for this example i'm gonna be using a model that i found on this github repository account drc mda now i'll leave the link in the comment section and now they got a a three uh react fiber example using a floating shoe okay so under the resources and there's a folder called gltf a folder and under there we've got four files that we need and this is an optimized model that has all the different layers so this is what we're going to be using so going back to my vs code so i've already downloaded that those files uh locally so what i'm going to do is i'm going to copy and drag it into the public folder of my project okay so uh remember i'm not copying the source anyway so i'm going i'm copying into the public folder so i've copied it over okay now there's another step that i need to do okay now uh with this file uh i can create some um react code using a command uh uh that will pull out all the layers okay so so what i'm gonna do is i'm gonna uh go to a terminal window okay and i'm gonna run uh so i'm in the folder locally where i copied this model not in my uh our project app folder okay so um so what i'm gonna do is np x and it's a g ltf jsx and uh the and we're gonna apply well what we need to do is we need to appoint it to the shu dot gltf file okay that's that's that's that one okay with the with the cube logo there okay that's the model for gltfr okay so when we run this command it will generate some react code that we can uh use it in our application okay so when this is done uh is a js file will appear here and it will be called a shoe so so when it's done uh so it will output a issue.js so it appears here okay so um what what i can do is i can just uh just open it up in notepad and i can inspect it so if i pull it over here okay so so this this file this is what it contains okay so it's got a it's basically a a react component called model and what it does is it it renders the model and all its layers and it's broken down the different layers like you know the laces the the mesh the caps the inner part the sole stripes etc okay so this is a basic model that react fiber can uh render so it's ready to be rendered okay that's what it what it is okay so we're gonna be using parts of this we're just gonna copy straight into our app.js okay so we don't need everything okay so we thought we would we don't we got all these parts on there already so what i'm going to do is i'm going to just copy this uh export default function so uh so it's not going to be an x4 default it's going to be a function basically so i'm just going to copy the whole thing okay so i don't need this part because this is actually a loading uh the model so we can do that uh in in in our in our code okay so in the first thing so i'm just gonna copy this okay and then i'm gonna paste it into my app.js i'm gonna go back to vs code okay i'm just gonna minimize the public folder now okay so in the app.js let me just minimize that okay in the app.js i'm gonna put it uh just above the app.js okay i mean the the app function okay so i'm gonna paste it in there so this is just gonna be a normal function all right so this is a plain function called a model okay so once again uh this is not an export default function so it's just a plain function okay and inside this code i've got a group wrapper there okay and that's uh that has a used ref reference and also uh you know within that it's got these child uh uh components uh you know which which are meshes okay and they access the individual uh uh parts or objects uh 3d objects for you know like the laces the the mesh the caps the inner part the sole okay so so you you can directly access them and manipulate them so that's that's what this uh you know this this whole sort of uh you know when you load it you know your you're accessing the individual parts the nodes and the materials so that's what's happening here okay so we we can access all of the color and change the color that's what we're aiming to do as i mentioned before this component is ready to be rendered okay so if i go down we can test this out and you know we put in a canvas wrapper there so we can render our 3d objects okay just before we do that i just noticed that we don't have a um we haven't changed the class the class name for these there's two there that i haven't done okay so i'm just going to quickly do that so it's going to be class name and class name here so that we don't get any jsx errors okay so here in between the canvas we can first put in a suspense element okay and what this does is uh this uh when you when you're rendering sort of uh complex 3d models uh you need this in place so that you know if there's any errors or anything it will it will catch it so you have a uh full back okay and is equal to and you can have a a spinner or something yeah i just leave it as null okay so in between the suspense we can put in an ambient ambient light okay and also just have one with a closing tag okay so and then also we're gonna have a uh model okay so this is all we need uh to test this out so if i save that and go to the browser just do a refrigeration okay so it's rendering a a small issue so uh so this is what what we uh what i actually expected now now we can continue with the rest of the uh customization okay next uh we're gonna first uh deal with the size of the shoe okay so if i go back to the model function and in the group element i'm going to add an attribute and it's going to be a scale equals to open close curly brackets and i'm going to say i give it a three value okay now if i save that and go to the browser okay so it's uh the issues become bigger now okay so if we go down now uh go to the the canvas area and we're going to add another light here so it's going to be a spotlight okay and we're going to give it some attributes like intensity equals to 0.9 and then we're going to also give an angle which is equals to something like 0.1 and then we're going to give a uh something called a new rock penumbra which is going to be a value of one and then we're going to give a position of um and just take that to the next okay position is going to be equals to uh we're going to give it something like um so it's going to be an array and it's going to be 10 comma 15 comma 10. okay so then we're also gonna give a uh give it a cast shadow as well okay so then uh next we're gonna give it um uh some orbital controls okay i'm gonna put that there okay so it's gonna be over two so all the two controls all right so this is gonna allow us to rotate and uh you know move the camera and think about that so we're gonna give it some attributes uh so we're just gonna say enable um enable pan so uh we don't want we want it to pan out okay so say true and then we also gonna have enable uh zoom and we're gonna set that to true as well equals to true okay then we're going to also have uh enable rotate to true rotate equals the true okay so and if i say this and if i go to browser okay so it's got a light there and you can rotate it around okay so it's it's a great color at the moment so next we're gonna deal with the color aspect of it okay so you can also make it bigger smaller right so look at it in different angles the soul in a lining okay so okay to add color to our uh issue or parts of the shoe uh we can we need to go back to the model function and as you can see we've got all these mesh elements and these mesh elements are associated to a particular parts of the shoe okay so you can add an extra attribute to any one of these meshes to give it a color so the the attribute is a material color okay and is equal to open close curly brackets and you can give it a a named color or a hexadecimal color so i'm going to just say red so i'm making the laces red okay so if i save this go to the browser okay so as you can see the laces are red now all right okay so we can do that to all of them so uh so we can just add that attribute to all of them and let me just see okay as you say material color equals open blocks from the market and we just set it to blue okay so all of them so don't leave it blank right so so now uh all of them are blue okay so if i save that little browser there you go so if i okay so so and now you can see the effect of the lights and things like that so if i change the stripes to something like red or something this is his stripes right stripes okay red and the soul white okay so now now you can see the full effect of the lights and everything okay so as you can see the the shine of the the stripes okay so so that's how you change the color so now we're gonna change it dynamically using these color pickers okay currently it doesn't work so that's the next thing we need to do okay to change our color dynamically uh using the color pickers we need to store these values in a state variable and then pass props through the model and if i go back to the the model function uh we see that you know we're passing the props already so we can get access to that and then we can we we can change the colors dynamically that way okay so first what we need to do is we can just uh pass some uh uh props uh manually okay just to test it out okay so so what we'll do is we will call it uh we call we create a an actually called custom color colors okay it is equal to uh open close curly brackets open close curly brackets again so and then we're going to so we're filling in a an object so it's so it's going to be uh we're going to have a color for the mesh and we just say it's uh red for the time being okay and then we're gonna have a color for um just the stripes okay and that's going to be uh that's going to be a blue okay so blue and then oops okay that's a blue okay then comma then we're gonna have a just put a comma there right then we're gonna have the soul uh which is gonna be uh we're gonna be white okay so all i created is an object with uh three items for mesh stripes and so and they uh they have a video of the colors that if we want them to be okay so so this so this should be accessible in the uh the model component now okay so what we can do is we can just replace say uh the mesh and we just say uh we just access the props now so we're gonna say props dot custom colors dot mesh okay and we do the same for the soul okay so that's the zone okay so but it's gonna be pro custom colors and it's going to be so all right so we're going to do the same for the stripes which is that one and we just change the name to strike okay so if i say that so these colors will be fed by the props okay so if we go okay so there you go so that's that's you know the body is red now and the stripes are blue okay so if i change the color there to a pink change and then that to a dark blue there you go so let's change the color to sort of pink and a dark blue okay so so just change it back okay so so that's um that so so we can manually change it like this so to change the color dynamically we need to store the color values in and state variables and so when we change the color by the color picker we will use an unchanged handler to update the state variable okay so that's what we need to do next so before i do that i'm just going to change these uh ids uh for these input fields and the labels okay so just to make it uh much cleaner so the first one will be mesh okay so the name is also mesh and i'm gonna also change the the which is mesh okay and second one is gonna be uh it's gonna be stripes i think it is stripes yep stripes so the name is going to be stripes and most of the four would be stripes okay and third one's going to be the soul so the name is also so okay and the four is gonna be so okay so this is just to uh make the code cleaner okay so uh so so we're gonna use uh these names mesh stripes and soul and also okay so what we need to do now is uh create the state variables so it's going to be constant equals use state and i'm going to set all of them to ff fff ff it's a little bit hash so that's basically white okay so that's going to be just copied down all right so so the first one is going to be mesh comma set mesh okay the second one is going to be stripes comma set strike and third one is going to be so comma set so okay so these are our three state variables okay now we need to go to the color pickers okay and we need to create a unchange handler okay so uh so it's gonna be on change equals two and then it's gonna be we're gonna have an arrow function and we're gonna say set mesh and is and we're going to set it with e dot target dot value so this will pick up the change value and it will change this state state variable okay so we can probably let's try this out so we also need to set that to the state variable so that'll be mesh now this would change the value now we need to feed that into the props for our model okay so we're gonna change this part now so we're gonna change that to mesh okay and then when we so when when it gets fed into there we will access the mesh variable okay okay so if i save that and there you go so if i change it to green i change it to blue change it to red so it's changing the main color to whatever i've changed on the color pickup domain okay so so these these don't work at the moment so because we haven't wired it up okay okay now let's uh try uh do the same for stripes and so okay so i'm gonna go to the second color picker okay and we're gonna say on change on change equals and it's a an arrow function and we're going to say set stripes and i'm going to set it with e dot target dot value so we're going to change that to equals to straps okay so i'm going to do the same for that but we're going to call it soul and we're going to create an unchanged angler is equal to and it's going to be e our function let's use set uh soul and we're gonna go to e dot target dot value okay so so that looks up here that looks okay now we need to change it in the properties that we're passing through so it's going to be stripes and so so if i say that go to the browser okay so everything's white so i change the body the mesh okay so that's changed it the stripes i'm gonna change it to blue okay let's change it so change it to a green let's change it yep let me change it to red okay so that's changing now we're going to target the soul so i'm going to change it to red let's change it green change it and yellow yep so that's there you go so it's uh it's changing all the colors so what we're going to do next is we're going to just customize it a little bit more uh so that the colors for these uh these other areas like this sort of this stripe thing and uh the the the caps on the laces and the patch at the back it's going to change as well and the inner area as well okay so if i go back and i'll go back to my model function and under the meshes we're gonna target those particular areas okay so i'm just gonna copy one of these so i'm gonna apply i'm gonna access the color props and for the laces i'm going to say it's going to be the same as the stripes okay so i'm going to say stripes okay and then for the caps i'm going to say it's going to be same as the soul okay so for the next we're going to look at the inner so that's going to be the same as this soul color for the soul okay and then we got the band okay so i'm gonna say the band is gonna be same as the stripes and then we've got the patch the patch is going to be the same as the sole so all we're doing is we're placing all the num all the colors uh with the color picker values okay so to save that and go right so now if i change the color to red okay so so you see the the strip and everything else is red in there if i change the soul color to blue okay you see the caps change and the inner areas change and the patch of the back has changed as well so if i change the stripes to a green okay so let's change the strip and the stripes okay so so this this sort of uh it's a better customization in my opinion i guess if i change it to a purple okay so see all these things match so if i change the stripe color again to a purple okay i'm going to change it to something as if the soul is purple as well i've changed it on orange there you go so so if i zoom in as you can see you can see the better you can see the texture is a bit more clearer so i hope you liked this tutorial and if you like uh if you think if you want to see more tutorials like this please subscribe to my channel and see you in the next video

Channel: ui-code-tv

Views: 41,446

Keywords: GLTF, react-three-fiber, 3d models reactjs, blender 3d model, 3d model reactjs, gltfjsx

Id: 2jwqotdQmdQ

Length: 50min 19sec (3019 seconds)

Published: Mon Feb 28 2022