3D model configurator with React Three Fiber and gltfjsx

hey everybody in this video i will be creating this amazing shoe configurator so you can click parts of the shoe you can change color click some other part change the color you can rotate and see model from different sides we also have some small shadow under the object so it looks pretty beautiful so how do you create this kind of experience well first of all it starts in 3d editing software this time it's blender and i've opened my model in blender you could see it looks cool here but the most important part is actually that it's already broken down to pieces all the parts that i need to change color later on already here so they all are separate meshes and they have the proper names and they have different materials which are also named properly so i could use them later on in my code and let's see how this workload works for us so first of all i would need to export this model so i would go to export in blender and just save it as a glb or jltf and i will get something like this like this entitled glb which i just saved and it's 1.8 megabytes it's not really ready for the web i mean glb and gltf are the standards de facto in three for fast 3d on the web but this size is quite big and to compress it you could usually use some tools and one of the best tools is a gltf pipeline and it has some ways to compress your model so you could actually use dragon compression to compress your model and to do that i would need to run something like this so i would just run gldf pipeline the source file the output file and then the compression level 10 is the maximum for draco compression so you would get the maximum possible compression out of it and then i would get the final file which is short glb on my desktop right now and it would be some port 250 kilobytes so like seven times smaller and yeah that's because draco is impressive well that that model would need to be decompressed on on when it loads on the browser but still it's seven times less than it was before so then after i got the model i would need to load it in the browser and the most obvious way is to just get the gltf loader from the 3gs library and just load it but then you would run into some kind of problems so i just i just did that in my simple 3gs boilerplate and i did a simple console log of what i do so this is the code this is how it usually looks like in 3g scenes so you just initiate the gltf loader and then you just load the actual model and i just cancel locked what i get when i load the model and this is the object that i get this object is pretty complicated you need to know those objects and actual scene is right here so i can go to children children children and this is where i get the actual scene the actual eight meshes eight parts of my shoe those that i just seen in the blender it's not really comfortable to get this kind of javascript object because i need to iterate over it myself and there should be a better way right and i used to use a direct3 fiber with this kind of approach and i created a nice demo but when i created this demo i actually iterated those objects so this is this was a glb file and i needed those parts because those parts were separate meshes and i had to iterate over them and save them as a separate meshes to do the animation later and it's not really a comfortable way to interact with the gltf and to work with the gltf in the javascript but there's a better way which is jltf js6 library which helps to work with with actual gltf so let's just try to run it on our glb file so i'm gonna go desktop i'm gonna go to desktop and try to run it had my shoe glb and let's just run this gltf gsx on my shoe glb and what would i get in return so i just got the shoe javascript this is the actual file and if i open it up i would see some actual react code so i have the dependencies code and i have my model already broken down to the same pieces that i saw in blender which is really cool and well let's try to use this model let's try to load this model to do this i'm going to load the basic react-free fiber boilerplates and let's see how it what works for us so i'm gonna load the live demo i think i'm gonna update to the latest react three fiber then i have those two nice cubes then i need to load my extra glb model right here to the public folder all good now i don't actually need those two boxes here i don't need the lights so i'm good with the empty scene i can remove the box part and now i can just copy paste the code from here well i i need to use gltf dependency obviously to load my gltf and now i could just do the actual component let's try to load it so i have the model the shoe glb should be the url for me i need to add the dependency react free dry and it's all good so now we could add the actual shoe to the scene to do this i would also need the suspense component i would just include it beforehand so now i could do this suspense and then include my shoe component inside and maybe i need to refresh this whole thing and yeah here we go this is the error it should be just now not the none obviously and we just loaded the model just like that and because we have it already separated into those objects i could actually delete one of them and we're going to delete part of the shoe how cool is that so i actually have full control over the shoe now over its parts and we could work with them we could animate them and we could configure them and that's what we're gonna do in the next part let's configure the model so now that the model is loaded into the environment we can start to change it and configure it so the important point if we have some dom objects and we have some 3d objects there has to be something in common between them and that something should be a state so we need a state management there's nice simple proxy based state management called valtio from poi mandras team and well let's use it so i'm gonna import valtteo and then let's get a state already wrote some parts of the stake so actually we have all those names of each of the parts of the shoe and we just state the color of that part and then we have the current variable which is going to be the current chosen part of the shoe and we have to wrap this whole thing into the proxy to use it and then to use the state inside the component we're just going to do the const snap equals use proxy state so now we have the snapshot from the state and now we have to use the actual snapshot from the state and to use it i have to set the material color to the state variable colors so i'm going to write material color equals and then i have to have something like snap and then the name like i called it items so it's going to be snap items and then the name of the each material so it's going to be laces and then i'm going to change it to corresponding material let's make it full screen let's try to see the whole name so it's going to be mesh this one's gonna be caps inner sole stripes and and patch and with this i have to see that my state is actually working at the moment so because everything is white i probably should change one of the colors to red and yeah the laces are right now so we have the state it's working properly now so now we have to get some other component that's going to be using the state and maybe changing the state so first of all i think i would like to have a way to pick parts of the of the mesh so now we need to add some events to know which part of the shoe is actually mouse over and for this i'm going to use the hook use state just to save the part now i could save into this hover too far the name of the material that i'm on at the moment so on pointer on pointer over i'm gonna have the event inside this function i have the kind of dom event function so first of all i need to stop propagation to know where exactly i'm at at the moment so i'm going to do e-stop propagation and then i have to set something to my average state and this is going to be e object material name and here we go inside the e object material name we're going to have now the name of the object and next thing i need to have another event on pointer out kind of the same but not quite and inside of that function i'm gonna just check if i'm still on the object or not and then set something to null so i'm gonna just intersections length if it equals to zero then this is a shorthand i'm gonna just set it to null so far so good let's continue so now i have to do something about the clicks so i have to do on pointer down and inside this event i'm gonna have to stop propagation again and then i can actually set the current state so i'm going to have this function here and inside that function i'm going to just do the stop propagation thing and then i need to set the state state current set to the e object material name so there we go now we have this object material name in our actual state and then i have to account for the situation where i clicked and i missed so on pointer missed i'm gonna just set the state current to null so now we got all the events and now we have to just check if we actually getting that name correctly so for that i will just create another component picker i'm gonna call it and i'm gonna use the state there and i'm gonna just do a simple div here return and if plus name picker and here i'm just gonna use the current pin snap current now we have this div i can just add it to my whole component i can't really add it inside the canvas because only 3d elements go there so i have to create a wrapper now it's good and now i think i i'd have to have this speaker name somewhere okay so now we have the soul now each time i'm going to click you could see that i actually change in the variable name so it's actually working so all the events are correct and now we have all the names of the materials and what's left to do is actually change the colors of the corresponding material and well let's do that so now that we have the snap current variable which is the actual current material we can actually try to change its color and what's best to pick the color is actually a color picker so let's add the color picker hex color thicker from react and then let's use it right here so instead of just the diff i'm going to add the color picker here also had some css so if i wrap this one in the h1 i could get a nice big font size which looks cool and then i actually need to add the color picker now so let's do that it's going to be hex color picker i have to set class name picker on this one so it will be positioned in a good place so right now they are aligned and looks beautiful and those are just position absolute and some top left coordinates so now we can just bend the colors from the color picker to the actual state colors so first of all i'm going to do color and then snap items snap current and then on change i'm going to have a callback which can just set the new color for the material which we got from the color picker and for that i will just do this state items snap current equals color and that should do the job so let's try clicking the soul changing its color and yeah it's working on clicking some other parts trying to change the color yeah it's working good so we just got the color picker working and it's working pretty cool one last thing we could do if we click if we miss the model when we click we could just hide the color picker and for that i will just do the style and then display it's going to be dependent on the snap current and if the snap current like exists or something it's going to be display block otherwise display none so right now if i click here i got the color picker it's working pretty cool and then if i click not at the model click outside it's not visible anymore so it's pretty cool we got the color picker one last bit that we could add here we could actually change the cursor when we just move mouse around and for that we're going to use use effect and let's let's just use a function and then inside of this thing we could use the hover it which we introduced earlier so we could just document body style cursor equals like depending on hover it's going to be either pointer or auto let's see how it works so right now when we mouse over the model the user could actually see that we could click it we could click it we could change the color perfect we could even go one step further i have some svg saved in my buffer which would make it beautiful so we in css we could actually change the cursor time to some svg image and let's just do that i'm going to copy paste some part of the code i'm going to come in this line so we actually have two different kind of cursors both both svgs and those svgs actually contain some variables already so they contain the the color of the harvard and then they contend contain the actual name of the um material that we are pointing our mouse at so right now you can see that when we move the mouse we could actually see the name of the material so when we click something when we change the color you would actually see this color right here because we already have the snap item sovereign color here and the snap items and all those benefits just because we already have the simple kind of state and then we could use it inside our ssgs inside our cursors so it's already looking pretty beautiful and only one last bit left we should make this 3d look beautiful now as well because right now it looks kind of plain it's not really a 3d so next the best ways to make your 3d model look beautiful in 3d environment so now my favorite part making things look beautiful let's do that to make things look more real and beautiful we actually need to add some more light into the scene and to simplify the process i will add a couple of new modules from the dry library i'm going to add orbit controls i'm going to add contact shadows i'm gonna add environment map so first of all i'm gonna add orbit controls and just when we add that we could already rotate and interact with the scene and you could see that the object is actually 3d but it doesn't look so beautiful in real in 3d because we're using ambient lighting and it just lights everything at the same level every single pixel of the model so to make it look better we could actually add another light spotlight let's make it intensity 0.3 and then position it somewhere at the angle i think this should look good enough yeah now we have the dark side and the lighted side of the shoe and it already looks much better still not quite there you could change the colors we could change the lace color but it still doesn't look real and sometimes when you get it at this point and the model looks either too bright or too dark you should actually check if the gamma encoding is correct and that is srgb encoding so depending on your mistakes in the code it it could be either too dark or too bright luckily for us react3 fiber takes care automatically of the common coating so we're good here not another way to make this 3d model looks look more beautiful is actually adding environment map so we could add another kind of lightning like environment lighting and for that we usually use the hdr maps and those look like this somewhat like this this one is downloaded from these 3js examples and i could just go ahead and add this one to my code just drag it to the public folder i have the hdr map now go back to the full screen mode and then add the environment lightning lighting so i should just do environment files hdr hdr and it immediately gonna look much better you could see that it's actually looking kind of real yeah we have slight shadow on one of the sides when we rotate we actually feel this is a real 3d model and this is already pretty cool and the last bit that you could add to to feel it 3d just to feel that this is a real thin flooring in the air is to add the contact shadows part i'm going to add the contact shadows and it has a lot of properties i just know already which ones are better so i'm gonna just put them there so you could see that we have those contact shadows just below our model and it looks awesome and 3d now and we could change the colors we could rotate it and you could feel this as a beautiful user experience for any kind of thing that you're going to put in 3d and was it hard i don't think so we're still under 100 lines like 80. we're still using just 80 lines of code and we already have full working configuration example of the beautiful looking fairy model isn't that awesome it is and well thanks to community thanks to the react community and especially the react street fiber community and paul henschel who made this video possible i hope you learned a lot from this one i will make a lot more short videos in future and if you liked one just share like comment and see you in the next one

Channel: Yuri Artyukh

Views: 23,427

Rating: 4.9807072 out of 5

Keywords:

Id: xy_tbV4pC54

Length: 23min 12sec (1392 seconds)

Published: Wed Dec 23 2020