Get started with React and Three.js using react three fiber

got enough where is okay here we go 5.0 2k are you kidding me 5000 subscribers I hit 5,000 subscribers yesterday and ever since yesterday I've been excited about just getting back and recording again I took a three week break where I was just kind of relaxing and you know due to the hook the whole weather due to the whole coronavirus thing I don't know it just sometimes you just feel like at the end of the day I'm working 9:00 to 5:00 and at the end of that I just don't want to continue working so I took a three week break but hopefully I'm back now especially after hitting 5,000 subscribers thank you guys so much I truly can't thank you enough quick announcement I want to make a thank you to Coolidge ro who is our first patreon subscriber or patron this is him right here this lovely guy went ahead and even though patreon is not really set up already started donating and I can't thank you and I'm really excited about that but anyway that's enough for the announcements today we're gonna work on using 3j s and react J s so that we could actually use some 3d modeling or kind of create a 3d model in the act now using 3GS and react is a bit tricky but we have Paul Hirshman I believe his name is who created three act three fiber which allows us to start using 3GS inside we actually s really really simply and that's what we're going to do today the video you see on the screen right now is what we're actually going to be making which is a simple sort of three boxes and they kind of have this little wobble effect to it and we can kind of rotate it around so it isn't all that impressive I know but we've got to start somewhere and we're starting at a very basic level now we are going to get much more advanced this is just the first episode of using the react to be fiber if you have any comments questions or anything like that go ahead and leave it below and I'll try to answer our best as possible thank you thank you thank you for 5000 subscribers we're really looking forward to growing the channel even more have a wonderful day guys please stay safe out there this coronavirus is not a joke so please be careful out there have a wonderful day you guys enjoy the video all right so to get things started you have two options you can skip over to this exact time frame and that is where we'll start from scratch using create react app and react three fibre or you can kind of sit through the first few minutes just so that we could talk about the final project if you want to download the final project you can head over to my github repo and clone the final files from there you can run npm run start and it will give you this project here now the idea behind this is we're going to keep it very simple we are going to create three different blocks or mesh and then we're also going to give them a little wobble effect as well as rotate them and then we're also going to use different lighting sources to create some shadows as well as give these shapes a bit of reflection we can also zoom in and out as well as rotate the canvas around if we click on these individual items they will expand like so if we click back on them they'll shrink so honestly it's just a really simple project just so we can have a good understanding of how reactive fiber works let's go ahead and jump into the code and look at our project files there isn't much to cover here but I've added a lot of comments just so that we can kind of have a better understanding so I do have a header js' file which is just the header this reactively fiber episode one and you don't really need to worry about that so we can close out of that we can also close out of package.json and for app s CSS there really isn't anything here new this is mainly just styles for the header and the body so we can get rid of that as well everything we need to know is really coming from a BAS so at the very top we're importing user F and you state under that we're importing canvas and use frame from react three fiber and what canvas is going to allow us to do is it's going to set up the scene the camera for us and it's really going to make it easy in three J s you'll need to set up a scene a camera and different things just to get started so canvas covers that for us the use frame allows us to rerender or update the rotation of our boxes at each frame so once it changes it will update every single frame and that serves not just for rotation but any animation or effect you add to our objects like I mentioned before we are also using dry and dry is just a quick way to add different effects rather quickly rather than needing to write them using three j/s while we're importing soft shadows mesh wobble material and orbital control or sorry orbit controls orbit controls allows us to move the screen or the canvas around like so and that gives it a little camera effect the soft shadows allows us to kind of have like it says sort of softer shadows which I like in my opinion and in the mesh wobble material as allowing us to have this sort of wobbly effect on all of our shapes which is really popular but not a lot of people use it like this a lot of people use it on sort of images but as we get more advanced we'll cover that we're importing the header component and the styles which is pretty simple then the react spring for our scale animation we're using use spring and animated this a represents animated if you're familiar with frame or motion it's sort of similar to this so when we select on our mesh they do scale up and down we're calling soft shadows here the we're executing the function at the very top that's all you need to do for soft shadows to enable it and then we have this component which is called spinning mesh and spinning mesh represents each individual block we're importing or using destructuring to import different props and these props are executed down below so we call this spinning mesh three times and then we pass certain props just so that we can have different effects for each individual block if we scroll to the top you can see that we're using a ref to just get the reference of the mesh which we have here and then for our use frame we're executing the following to get the rotation to happen so as each block is just spinning in its own sort of axis or so own sort of block that's how that is with the use frame we have basic state expand instead expand to expand our box which we covered already and then this can go away I was just testing something then down below here is where we're building out our box so we're using a mesh we can get rid of this console.log as well we're using a mesh and then inside of the mesh we define what kind of shape and the material we want so box buffer geometry represents a box and then the Somesh wobble material represents this wobbly look as well as the fact that we can add different colors on there so typically you'll always pass a buffer geometry and a material into your mesh so that you can define the shape and the effect or color on that specific item so as we build out I will use different shapes but will ultimately reflect back to the box buffer geometry and it will make more sense as we're building down below I do have this common set out which we can use dry to go ahead and create a box and we could pass in a mesh wall material so we don't need to pass box buffer geometry this right here is just using three J s to build our cubes if we wanted a quicker way to write a cube we can use box from dry again dry is just that's a quick snippet code that we could use I mean it just has different items that we can import so you could use this version to create the same effect this is just three J s and this is just using dry down below we have our app function which is just rendering ours app now to write three J's code you need to write it inside of a canvas this canvas is imported from the 3x3 fiber it isn't your typical HTML canvas inside this canvas you can then write any and every three J s property you want and what we have here is different light sources that we're using from 3 J s ambient light I added some comments I'll just read those it sort of make things looks a little pretty from my opinion I'm trying to dumb it down in terms of definitions directional lights this is going to be our main source which sets at the top you won't be able to see it but it will set up here and it shines down so directional light is always sort of your main source of light you could point in any direction it also casts shadows so that's really important then we have two point lights which the two point lights kind of sit right here and right here and so you can see that it's hitting it on the left side and the right side and point lights do not provide any shadows and they're kind of just sources of light if we get rid of this actually you'll see and save it so you can see it's a bit dark on the right and the left sides of each section so if we add point light it kind of just illuminates the different objects that we created then we have a group and this group represents a different items that we have displayed so we've got three spinning meshes and then we've got one custom mesh that we created and the three spinning meshes these are custom components that we created at the very top and then we're passing props which we've discussed but then this mesh over here this is going to be our floor which you can't see it but in order for the shadow to be casted we need to have a floor or a plane kind of set at the bottom so if I were to go ahead and get rid of this or comment it out you can see that the shadows never defined or you can't see the shadows at all that's because no floor is defined if we get rid of the first spinning mesh it's going to get rid of the big blue one and honestly that's really N oh I'm sorry I forgot one thing the orbit controls which allows us to move around the canvas and different perspectives like so so all we do is import it from dry and then add it here as a component so it's really really easy honestly using reactive fiber is much easier than 3j s in my opinion there's a lot of boilerplate when using 3d GIS and react three fiber hand does a lot of that for us so if you're excited about this let's go ahead and jump over to the next Queen where we're going to use create react app and install all the following dependencies to get started okay so I'm already in hyper j/s and average I guess is just my terminal all it is is just a pretty version of your typical command-line interface so from here we'll go ahead and do npx create - react app and we can name the app anything we're gonna call it react three cubes I guess this will go ahead and get create react app installed for you and after that we're gonna move on to install the required dependencies that we need once that's done let's go ahead and CD into our project so we do react three cube and there's no directory it's cracked three cubes with an S and from here we'll install all the dependencies and so we're gonna in solve three J s and we're using yarn you can use NPM if you want but for yarn you'll do you're an ad and then the dependencies you want to add so we're installing three we're installing react three fiber which is the react version of PJs or the rec installer from here you can go ahead and install dry think it's called dry I thought it was Dre initially but it just means three in German finally we're installing sass and react spring and we all know assesses for our CSS and react spring allows us to do animations similar to frame or motion it's just favorite motion doesn't allow for you to add animations for different mesh or groups related to three GS so that's why we're using react spring because they're created by the same person so let's go ahead and clear that and then open this envyus code once we're envious code we can open up the source file now let's jump into app KS and get rid of everything else in here we don't need any of that stuff we could change app CSS to app s CSS as well as the file for app CSS changed that to FCS CSS get rid of the logo SVG for the app sass we can get rid of everything that's in here and save this let's go ahead and open up or terminal within vs code and one yarn start and this will open up localhost 3000 currently it's MZ cuz we deleted everything but if we write hello it will show hello on the top left perfect so what I'm going to do first is create some default styles in abscess just so that we can have a background as well as basic styles for our and body so I'm gonna add an asterisk and we're gonna give the asterisk Vox sizing a border box this shouldn't affect us at all since we're using three Jas but just always added in no matter what then we have the HTML and the body we can go ahead and add a width a hundred-percent a height of 100% our margin and padding will be set to zero and I misspelled width up here so I'll just make sure you spelled correctly and then for our body let's go ahead and add the following we're gonna give it a background color of f1 F for f8 well we could just make this position fixed and if you wanted to add text and everything you can add a font family but that doesn't really matter let's just leave it like this for now and if we need to make any edits we can come back to it let's go ahead and go into our FJ s and let's fill hello back and make sure everything is working like it is perfect now the first thing I would like to do now the first thing I would like to do is just create a normal box that doesn't have any special effects just so that we can get some understanding of how this works the first thing we'll need to do is we'll need to import canvas from react 3 fibre so we'll go ahead and import canvas like so and then I'll go ahead and get rid of this div I'll go ahead and leave it as a react fragment and then inside this fragment we can use our canvas now one thing we need to mention is that we cannot write any HTML within this canvas only HTML that is valid is outside of the canvas and that's because the canvas is only taking 3 j/s elements we can go ahead and create a cube by writing the following first we'll define a mesh and then inside a mesh we'll need to define a material and a geometry for it typically the geometry would define the specific shape and the material would define the color or the look of the specific shape what we're going to do is create a cube or a box so this will require us to use a box buffer geometry again all of this information can be found within the 3gs documentation 3gs documentation is really well put together the only issue I have with reactivity fibre is the documentation is liking so maybe sometime in the future they could really build a you know good documentation people can follow so we've defined our mesh here what we'll do next is define what shape we want and like I mentioned we're going to use a box buffer geometry so let's go ahead and write that and box buffer geometry can be self-closing now when you define these specific elements a required attribute is one called attach and this will let us know that if this specific element is representative of the geometry and when it comes to material if it's represented a material specific to the parent mesh or this mesh here so since this is going to be representative of geometry so let's go ahead and write them and then another required attribute is orange and now what this args attribute represents is sort of three things just general size of it right it's going to represent the height the width and the depth so for now I'll set everything to one but the way to write it is through an array well go ahead and set the width to one the height to one and then the depth is going to be set to one as well it also be thought of as when it comes to working with position as XY and Z but this one is specific to our X which is our overall size of the specific item that we're working with next we're gonna work with a material now in the final version we have a mesh Wabble material which makes it wobbly but we'll get to that in a second right now what we're going to do is just provide it a mesh standard material so to do that we could just say mesh standard material like so and similar to the box before geometry will need to attach but this is going to represent it's going to represent our material now before we save I did make a mistake I spilled geometry incorrectly get rid of that extra E and let's take a look what should happen is that we should have a small box or a small cube on the screen and we do it at the top now I want to Center this to the center of the screen and I think the main reason that's not happening is because we need to also add a ID of route to our HTML and body styles here let's say that and then now we can see that it is in fact in the middle of a screen and in second of the entire page so our canvas is in fact a hundred percent of the screen one thing I forgot to mention in the beginning is the fact that using 3j s without react you'll have to define the resize handler you'll have to define where your camera is going to be as well as the scene but then canvas takes care of all of that including the resize behavior which is really really neat so now that we created a basic cube I also want to show you if we were to use dry dry allows us to pretty much write code a lot faster and what I mean by that is we can just import a box that's already built by the people like the dry and what we could do is just render that out here so we'll render out a box and if we comment down with the mesh that we had above and take a look you could see that it is in fact the white box but if we wanted to add a material such as changing the color on this what we could do is inside of this box go ahead and add a standard material which turns it black now we can play with the colors the only thing we need to do is add some sort of lighting because if there is no light and there is no color that's how the world works I think at least anyway so yeah you can you can reference dry here and you can go to their documentation they have all the shapes you need so that you don't need to write additional code we won't use box we're going to just stick with the mesh we created because we want to understand basic fundamentals here with three Jas now we aren't limited to just a box or square what we could do is create circles as well really any shape we want to create a circle really quickly we could change this to a circle buffer geometry however the arguments that it's going to take for this are X is going to be a bit different the circle will take two arguments and these two arguments represent the size as well as the amount of angles that it has so what we can do here is we can make this the size of a two or scale of two and then for the angles actually let's not do anything let's just leave it as one - one for now and you'll see what I mean so you can see that it looks like a triangle and doesn't even look like a circle if we update the first number it's going to get larger however the second one represents the amount of angles if we update this to 50 and save that you'll see that now it looks like a circle but it's still a bit you know it has those angles on the side the more we increase this the smoother it's going to look so if we put this 230 you can see that it's a bit more rigid but it kind of has that attribute of a circle so this is just basic shapes and you can go through the documentation and get the entire you know kind of context of how to create different shapes based on your mesh okay so to move on here what we're going to do is figure out how we can rotate this box and then we're going to add some lighting just so that we can start playing with color part of react three fiver there is a hook called use frame which allows us to re-render based on different movement so we're also going to need to require us to use use ref so we'll import use ref because we need to be able to get the reference of this mesh here I'll go ahead and do the following I'll create a new user F and I'll just call this one a mesh also use ref this one's going to be set to null initially and then we'll assign this ref as mesh and then from here we'll run the use frame hook and what we're doing is grabbing that mesh so we'll use mesh current and then we want to adjust the rotation of it so we're adjusting the rotation of X which is set to the rotation of Y so we'll do mesh current rotation dot Y and then for each rerender or each frame we are adding a point zero one now with using use frame one hiccup that I've had in the past and it's mentioned in the documentation is in fact you cannot use use frame within your app component or the component being displayed you'll need to extract this mesh into its own component using use frame and then importing it in to your app or whichever components you're exporting how into the page so if that Jewish didn't make sense to you what I mean by this is we'll need to extract mesh into its own components so I'll go ahead and do box and what we're just doing here is creating a box into its own component and then we'll return the following so again nothing's being displayed and we have error logs this is because of this reason we'll take everything that's we've defined here and mesh and put it into box as well as the user F in the use frame and put it into box here what we'll do is render out box in our app component so I didn't get an error and that's because box is already defined with tray so we can get rid of that if we want to name this box we can even name it spinning box because that's what's going to do it's going to rotate and if we save this and preview it's going to start spinning and it works now the reason it didn't work the first time is this user F is making continuous callbacks from each time this item is being rotated and so if we have it in our app it's going to continue to make an infinite loop of callbacks versus having the component on its own and executing the use frame and then importing it here this prevents that from happening and it's also mentioned in the documentation I just wanted to show the error initially and then have us fix it so always when using use frame it needs to be in its own component like so now I want to work a little bit with lighting so that we could start to introduce some color what I'm first going to do is just add an ambient light now to add that advant light we're going to edit in our app component and we could just add it above the box component that we created so we can just say and be in light and I wonder if it gives us descriptions here and it doesn't which is fine so adding ambient light we also can add intensity to it and in Sin City just represents how intense you want that to be so I'll just add a point three let's say this in preview so now you can see that it kind of transitioned from that dark black color to sort of a lighter grayish tone and as we increase the intensity let's set it to one you can see that it's going to turn white if we change this to 0.7 depending on the intensity of the light that is going then to change the color of the object we're going to set the intensity to 0.3 and what this ambient lights doing is it's globally illuminating all of the objects on the scene equally and that makes everything kind of have a a bit of light to it each and every individual object one thing you need to know is that does not cast shadows meaning no matter how intense the light is there is never going to be any shadows if we wanted to define shadows but we could do uh you know having now some sort of light source specifically with ambient light we can then start to play around with color if I wanted to turn this the cube that we made to a color of blue again make sure that we add this colored attribute to the standard material we can then add color blue and it will turn this cube to a colored blue we can also add a light blue and it would also turn it to Y blue which doesn't really look like light blue aren't there but I guess that is what it is green pink yeah so you get the idea it isn't all that pretty but it's going to get there in terms of having that Y blue and pink colors we have in our final project so back in our project here we'll leave this as pink for now and two attributes I want to pass into my canvas are a color management attribute so looking at the colors now we see that we have pink and it doesn't really look like pink once you pass color management's however you can see that it looks a lot more like a pinkish color as well as that light blue that we were working with earlier having color management now it does make it look like light blue I also want to change the angle of our camera and like I mentioned before camera is already kind of being defined within our canvas as well as the scene and the resized behavior but if you wanted to edit the camera you can use dry to add additional cameras or you can build your own camera as well but a quick way to do it to change the camera position is adding a camera attribute and then just switching the position so the position I want to set this to is the following I'll go ahead and set this to a negative five a two and a 10 and then we also have a field of view and all you PC players you know what field of view is it's pretty much how zoomed in or zoomed out we are so if I set that to 60 you can see that we've changed sort of the camera angle although you won't really notice it all that much because we don't have any plane to work off of but we've changed the camera angle and the field of view as well now if I change the field of view to 20 you can see that we're much more zoomed in to the cube that we had created already but let's go ahead and set that to 60 now what I want to do next is go ahead and add three additional boxes and then just change the sort of shapes for them now this is the cool part of react where react allows us to create reusable components and then pass different props so that we can edit them slightly for the box I am going to change the name of this and we'll just call this spinning mesh and we'll go ahead and save spinning mesh and then we'll render spending much three different times and if we take a look you won't see three different ones that's because they're all overlapping each other if we start using positions we can change the way they're located and it's sort of similar to this arguments where arguments is taking a width a height and a depth position will take XY and Z but we still face the same issues so for example in our position here or inside the mesh if we pass the following right if we say we want the X to be at a negative two the Y to be at one and the depth to be negative five we're going to change the position of the mesh but then it's also going to be repeated for every single one this is where we're going to use props and destructuring so that we could change the position for each independent spinning mesh so for our first spinning mesh we'll give the following a position of zero one zero and I'm just going to copy and paste the same position for all and then just change them for the second one we'll give it a negative 2 a 1 and a negative 5 and for our last spinning mesh we're going to give it a 5 a 1 and a negative 2 now we need some way to use this position and we don't want to use the same position so I'll get rid of it at this spinning mesh using these structuring we'll go ahead and bring in position and for our mesh here position will then just take in our D structure position from our props here go ahead and save that and then now you can see we have our main spinning mesh and then the two in the background on the left and the right I want to change additional things so I want to change the color I want to change the what do you call this the the arguments of our first one so that they are larger than the second and we can just go ahead and do that in our first spinning mesh will pass in args and we will make this a 3 a 2 and a 1 so it's going to be wider than it is high in the depth is going to remain 1 so refreshing didn't seem to do anything we seem to be have broken something okay so and our and our args we passed the ambient light instead of passing it in our spinning mesh so go ahead and add that there but we'll need to take in this arguments right here we can go ahead and add a comma and then for our box buffer geometry we'll just pass args as args and now we would need to define the argument for our other two spinning mesh but since they are going to have the default high within the depth we can just leave it as is and it will automatically set the height depth and wet to ones so we don't need to worry about that but you can see we've kind of got our shapes going here for us which is neat what we want to do next is just make these stand out a little bit and that's just by changing the color we're going to give the bottom two or the two in the back a color of pink and for our main mesh we're going to give it a color of light blue go ahead and bring in color here we can also apply color to the mesh standard material in depending on whatever we pass such as pink or light blue it will been taking this so we've got pink in the background blue in the front let's go ahead and add some lighting just so that we can kind of have some sort of reflections and then we'll add shadows to add lighting right now what I'm going to first do is just add some point lights on the left and the right just so I think it'd be reflective a little bit and then we'll add our main directional light which will be our primary light source to add a point light and we can just add point light like so and I don't want it to have two tags I just want it to be self closing so we'll have point light like that and now with point light we'll pass in the position in the intensity so for our first position we're going to give it the following positions again it would be XY and Z so the X is going to be a negative ten a zero and a negative twenty and then for our intensity we're going to give it a point five and save that if we preview you can start seeing that there's a bit of a light source here coming in from the left side since our x-axis is having a negative 10 it's going to be pushed to the left side here we want to add a another point light and we'll just copy and paste this again we'll switch the intensity of this one to one point five now the position for our second point light is going to have an X of zero and it's going to have a Y of negative ten and then the depth is going to be zero so actually this one looks like it's just going down here so it's not necessarily to the right too much but that our light source is coming from the bottom so you can see it hitting bottom right there so our main another main sorry our second point light or light what is it called point light yeah our second point lights here at the bottom and then our first ones here to the left and then we're going to have a directional light coming down and casting a shadow will add the mesh wobble at the end because that's the coolest part let's go back here and let's sort of separate this a little so we have right here actually JSX comments look really ugly we're not adding then who cares let's add the directional light which is our main source of light think of it as a Sun and this directional light will cast shadows like I mentioned before so let's go ahead and do that let's add directional light and in the directional light we're going to adjust the position the position is going to be the following so it's going to be similar to what we had for our bottom point light it's just it's going to be 10 pixels not pixels but 10 to the top I wonder what the measurements are and everybody looked I wonder if they are pixels or REMS or whatever you measure whatever 3GS uses to measure it but the intensity here is going to be set to 1.5 and then the size of our shadow map size width is going to be set to the following so we can do shadow map size - width this will be set to 1024 and we also need the height so don't forget to add an additional dash for the width and the height and it's going to be lowercase it's that's funny right 10 40 finally we need to adjust the cameras for the shadow so the shadow camera what we could do here is write shadow - camera - far and this will be set to 50 and then I'm going to copy and paste this a few more times because then we're going to edit the left right top and bottom so then shadow camera left is going to be set to a negative 10 and then we're adding an additional one and changing the right to positive 10 and then the shadow camera top set that to 10 and then finally the shadow camera bottom will be set to negative 10 now for some reason I wrote shadow map up here but it's going to say shadow map size - width and - height I don't know where this shadow map came from so go ahead and delete that let's save this and take a look at our project so we've got that main source of light coming in at the very top and it's illuminating our objects really really nicely I feel like it might be a little too bright actually so let's lower the intensity down a bit let's go back in our project and if we want we can lower the intensity to a 1 and then this would make it not as bright actually for now we'll leave it as 1.5 and then adjust as we continue so what I want to do next is cast a shadow at the bottom like I mentioned in the very beginning we cannot cast a shadow if we don't have a floor or a plane so let's build that plane really quickly and to do that we're going to make some room for us so underneath the point lights we could create a new group and then again to create any sort of shape we need to create a mesh first and inside of this mesh what we're going to do is use a plane geometry buffer or plane buffer geometry and we're going to attach a geometry to it and now for its arguments it's going to take two arguments and both these arguments are going to be set to 100 and 100 and then we're also going to provide it a material now to create a shadow or to make this plane or a floor cast a shadow or you know its main source is going to be a shadow we will use a shadow material but I want to see how this plane buffer geometry looks like on where it's going to be for our floor and for that I'll just go ahead and use a mesh standard material and so I will go ahead and add mesh standard material and we'll set the color of it to be I don't know yellow but we'll make a comment saying this will need to cast a shadow and for it to cast a shadow will you know like I mentioned require us to use something called shadow material now let's see how this plane buffer geometry looks like so you can see that it's covering the entire screen but what we want for it to do is sort of rotate and change its position to where it's going to be aligned perfectly to the floor just so that these different objects these cubes that we created it would be on top of it so it's going to be this sort of laid out carpet or floor to do that we'll need to change the meshes rotation what we could do here is add a rotation and for our X will want to use a minus math dot pi divided by two and then for our Y and depth we're setting that to zero we also want to change the position and for the position that it's going to carry is the following it's a zero a negative 3 and a 0 and if we save this and look at our preview you will notice that the plane is sort of representing a floor now it is completely rotated and it's yeah it's a plane it's a floor uh-huh what more can I say so that's awesome now we're going to make this cast our shadow and it will change that to the shadow material and it's going to take in the shadow from our directional light that it's up here it's gonna be pointing down so let's do that changing this mesh standard yellow we're going to completely erase that and this comment so we'll go ahead and add a shadow material here and we're going to attach a material like so perfect if we take a look at what's happening nothing's going to be shown just because we haven't added the following attributes to work with shadows just yet to work with shadows what we're going to do is in our canvas we're going to pass in shadow map and then for our mesh we want this mesh to cast a shadow so this is going to have a cast shadow prop as well as our directional light this is where our main source of light is coming from it's also going to cast our shadow and then finally this plane over a year is going to receive the shadow so we're casting shadows from our mesh and our light and then this plane is receiving our shadow so go ahead and add a receive shadow attribute and our floor or plane now if we take a look you can see that it's showing our shadows now however they are extremely harsh changing the opacity of the shadow material should fix that just a bit for us so adding an opacity 0.3 it makes this just a bit lighter no shadows a hundred percent black so just don't you know don't leave it as an opacity of one said it's whatever you like now I do want to include soft shadows and you'll see the difference it really makes here and soft shadows is going to be coming in from dry to bring that in let's go ahead and import soft shadows and we're importing this from like I mentioned before this fancy a little helper that we could use with our react three fiber to execute soft soft shadows just go ahead and execute at the very top and it will soften up our shadows look how soft those look let's comment this out in preview you can see that they are harsh and they are really defined however using a that soft shadow soft using that soft shadow function will then kind of soften them up for us okay so we're getting there we're almost done we have the mesh wobble which we need to add as well as using a spring react spring to scale up and down these cubes so let's go ahead and see if we can bring in the mesh wobble to bring that in actually it's going to be coming in from dry as well so we'll do a mesh wobble material and this is going to be really easy to add so we have mesh standard material here we'll just replace this with a mesh wobble material and then we'll pass in additional props for it the props were passing in are the following so we have speed and speed is going to be determined by each specific one they're going to change before now we'll add a speed of one and then for our factor we're going to go ahead and set the factor two point six let's go ahead and take a look now so now you can see that they are a bit wobbly and depending on the speed and the factor they do change in terms of how wobbly they get so a speed of three it would start you know move in look at that it's really going now and in the factor if we change this to a factor of two is going to get really intense and now it's just super emphasized and it kind of breaks for our middle one because it's too emphasizing so it kind of just doesn't look good at all so I will change this back to point six and one actually was that one was it it was yeah I was one okay point six and one but then they are going to change depended on the item so we're going to bring in speed here and then we're going to pass one with speed speed is going to be a prompt that we're going to pass for each one so we'll add a speed and depending on what speed we want to add it's going to vary so I'm thinking that the speed of the the two meshes in the back are going to be set to six and then the speed for our main light blue mesh is going to be set to two so let's save this and so the two meshes in the back the smaller ones are much faster then the main one in the front and I think that's better I think if it's larger it's supposed to move a bit slower because there's a lot more room to cover but yeah I think it's I think that's it looks good right there for our mesh wobble we can also bring in an orbital control and orbital control is going to be a snippet from dry as well so bringing in orbit controls I said orbital control but it's just orbit control we can pass orbit control at the very very bottom here so we'll just pass in orbit control and then using orbit control all we need to do is just pass it there and we can start moving our canvas around like so I can even zoom in and zoom out with our mouse which is really really neat all right so we're almost there let's just go ahead and use react spring to add some animations to these including you know just scaling them so let's go back in our project and I actually want to add this spinning mesh inside of the group that we created just for organizations sake it's not going to change anything but you know when we're building larger projects we kind of want a better style to grouping all right we can go ahead and scroll to the very top and then we'll import the following so we're going to import use spring and we're also going to import a which a represents animated but you could use a for short and we're importing this from react spring now be sure to add a 4/3 when you're working with 3j s or you know animating the mesh for the groups and if you're working with HTML if it only just be react spring and not reacts from three so to get this going what I am going to do is we'll first want to create a state so I'll add you state here at the very top and then in our spinning mesh we'll define the state so I will do Const expand set expand and it will say use state and set this to false because initially the aren't expanded now with you spring will create the following typically they're called props because when you're just defining an animation without any functionality it would just pass prop so if we define props will pass props as style props which is basic you spring you know in the documentation that's just the basics of it but we'll just say props here use spring and then within this use spring we can assign different properties now you need to make sure that you know working with mash you could only work with the properties that mesh provide you can't change the opacity opacity comes from the material and other things the main things that you know you could change your like you know the position or the scale and that's what we're going to actually do we're changing the scale so this scale is going to be dependent on if expand is true or not and if expand is true we'll set the height to 1.4 we'll set the width to 1.4 as well as its depth to 1.4 otherwise we're setting everything to what it is by default which is 1 now with the mesh here what we'll do is have an on click event handler and we'll just say on click we're going to just set expanded to the opposite of what expanded already is which is false and we could set it like about what is that we could set it like so and I actually don't have expanded state it's just called expand now to get this to scale what we're adding is an additional scale property here and then we're going to target props dot scale like so so if we refresh we could see that we've clearly broken the application for some reason now the reason why it's not working is because if you think back to our framework motion tutorials we need to turn this into an animated component to do that we'll just add a dot if we had imported animated at the table would be animated dot and so on with framer its framer sorry with frame or motion its motion dot you know div or whatever that component is so adding a dot will then turn this to an animated components allowing us to use the use of ring hook or any spring hook we want so let's save this now and preview and if we click you can see that that then expands our cube as well as the shadow if you click on this pink box it does the same and so now we just have state that is assigned to each individual mesh and when we click on each one it will determine if it's expanding or not okay I think that's going to do it for episode one of using react three fiber I think you know we went through everything we talked about lighting shadows creating mesh everything that we need to sort of cover in order to create a basic yet you know pretty looking application not really an application but you know three J s 3d app that's gonna do it for me we are gonna get way more advanced but we've got to understand basic fundamentals and this is the point of this this is just episode one if you did enjoy don't forget to leave a like don't forget to subscribe thank you so much cuba Jaros or ha tous i don't really know how to say your name kuba thanks man that i really appreciate that anyway have a wonderful day guys i'll see you in the next episode take care of yourselves out there [Music]

Channel: Wrong Akram

Views: 60,809

Keywords: javascript, react.js, react, github, code, css, jsx, ui, ux, awwwards, javascript animations, three.js, 3d, javascript 3d, react-three-fiber, react-spring, webgl, react 3d

Id: fdtqqyeKRJk

Length: 47min 40sec (2860 seconds)

Published: Sat Jun 27 2020