React Three Fiber (R3F) - The Basics

what is going on you guys and welcome back to the channel in this video we're going to be looking at how we can merge the world of 3D web development with reactjs and we'll be using a library called react 3 fiber now what react 3 fiber is is it's essentially a react based Library built on top of another very famous Library called 3js and what that does it just allows us to build 3D web applications now the course of this video we'll be unraveling the secrets behind 3D rendering in react whether you're a seasoned developer or someone just getting their feet wet there's something here for everyone so just to get up and running I do recommend that you have some react background not necessarily 3js background but some react as that will definitely help in this video but otherwise by the end of this tutorial you will have the fundamentals of react 3 fiber so you can go ahead and build on top of that and build very immersive websites but to give you an example of the sort of things you can build with react 3 fiber uh you can go ahead onto their website I'll add the link in the description but they have a bunch of different examples here one being let's say magic box and they have this code sandbox where you can have a look at check out the code but also get to see what sort of things people have built now this one is fairly interesting I did click on it not so long ago but you can see here this cool rather artsy looking 3D model that they've rendered in another cool one is this thing called or this website called lusion where they have this really cool website which pretty much gives you an idea of what exactly they do uh this nice kind of like ripple effect as you move your mouse but as you scroll you get this cool kind of story being played out with this astronaut like whizzing around I don't know what that is but it's super cool uh and essentially this is what they've built using 3D Technologies I'm assuming with this one it's also with uh react 3 fiber and another one where you can kind of scroll and as you scroll you see these objects kind of rotating and moving around but we'll be looking at the very basics of this and then hopefully in the future we can do a tutorial about building something way more complex way more animated but otherwise let's go ahead and get started so in order for us to get started we first need a react environment so I'm going to go ahead and use vit which is just another build tool I prefer to use it you can go ahead and use whatever you want but for the purpose of this video it doesn't really matter um if you're fine with v or if you're just fine using Create react app go ahead but uh I'm going to add the link for this for vit in the description so if you want to read more about it feel free to but uh down here you can see all the sort of installations or ways you can install it I'm just going to go ahead and use npm but if you use yarn or pnpm feel free to use that as well so I'm just going to copy this go ahead into my terminal and paste that in let's give it a second okay to proceed I'm just going to name this r3f so r3f is just a short form for react 3 fiber and call it Basics and I'm going to use react use JavaScript I mean if you want to use typescript by all means do but for the purpose of this video I think just using JavaScript uh is fine as I just want to get across the fundamentals of react 3 fiber but now I'm just going to jump into that new project just install it just give that a second then go ahead and open it in your desired text editor I'm just going to use VSS code for this just give that a second and we're up and running all right let me just zoom in for a bit uh just in case you guys can't see so we have our basic project structure nothing too fancy but now we need to go ahead and make the necessary installations so for that let's go back to the react 3 fiber website and on their intro on their intro page you see this uh installation that they're requiring so it's uh three which is a 3Gs library then you have the types I guess it's very important if you're using typescript and then the react 3 fiber Library itself so I'm just going to copy this and then just go back to my vs code open up the terminal here and then just paste that in now of course all the code that I write here will also be made available on GitHub so feel free to check that out um so if you want to skip this video and just read The Code by home means feel free to do that all right so now we have the libraries installed so we have react 3 fiber um we have the types and we have three as well installed that's all good next we need to just yeah do some housekeeping get rid of any code that we don't need so first we have the app. CSS file I'm just going to go ahead and delete all of that as we don't really need um most of it to be honest and what I'm going to go ahead and do is add in just basically remove anything that's like CSS related so I'm going to make sure that the width is 100% that covers the whole screen height is 100% And this is mainly for our scene so our scene takes over everything and then margin just to be sure set it to zero and padding let's do the same with zero there as well so that's how app. CSS file sorted out we don't need the index. CSS file so I'm just going to go ahead and delete that move that to trash in the main. jsx file let's just remove the import for index. CSS this is all good let's close off our main let's go into app.jsx and let's just get rid of all of this boiler plate because we don't need any of that let's go ahead and get rid of it and let's just put H1 for now and say hello all right let's get rid of this let's get rid of all of this here and this is just me being a bit OCD I kind of prefer it to have my components my functional components written like this uh if I can write it like that that took a second but um yeah so we have the very basic sort of out so let's go ahead and run this so we're all good let's go ahead and open it up so over here hit refresh so yeah we just have our hello nothing too fancy um and yeah we're all ready to get our react 3D react application up and running so to begin with for every for every 3js r3f um react 35 I'll call it r3f for now but for every r3f we need a canvas and this canvas is basically like our if you imagine like a theater this is our stage this is where we're going to put all our props all our characters all of that in there so for that I'm just going to get rid of this and go ahead and type in canvas and for me automatically imported it but the import is like this so import canvas from react 3 fiber now if I go ahead and save this go back to let me just adjust all of this so if I go back here you can see that we have nothing there so we just have an empty canvas right now so let's go ahead and add some characters to this so first of all I'm going to go ahead and create and I'll explain in a second but I'm going to go ahead and say mesh and then box geometry like so all right let's go back and there we go you can see here that we have this this the square basically but it's actually 3D object it's just that we're looking at it from the Z axis and looking directly at it so you can't see anything behind it and uh it's it's basically rendering it right in the center of the page now what are we going to go ahead and do with this well we can add some color to it uh we can you know change the way it's positioned but let me first explain what we just did so first of all what is a mesh now a mesh in 3js is a fundamental building block for rendering any 3D objects and what a mesh needs is a geometry so a shape whether it's a cube or Square a box in our case it could also be a uh do decahedron or a a Taurus or a pyramid whatever you like and it also needs a material in our case it's just using the very standard material that's why I don't see any cool kind of texture on it but we can go ahead and add some material to it so our mesh also needs a material let's go ahead and use the mesh standard material let's go ahead and add that and if we go back it's turned black now the reason why it's it's it's black is because we have haven't given it any lighting and this particular material needs lighting um so we can also use another material so we can see mesh basic material and that doesn't require any lighting so it will show no matter if you have Lighting on your canvas or not and we'll get into Lighting in a second so don't feel too overwhelmed if you are right now but we can also change the size of our box now to do that we can go ahead and say ARs and then give it some values so along the x axis we'll have it by two along the y axis we'll have it by two and along the Zed we'll have it by four if we go back of course you can't see the Z axis from here because we're looking at it directly on the Zed axis at the dead center you can see that it's become a bit bigger it's 2x two on the X and Y and we'll see in a second how that is on the uh Z axis but if you haven't noticed by Now the default value for augs is 1 by one by one so if we were to get rid of this we would just go back to a refresh this a one by one by one Cube or a box okay so now let's go ahead and change the color of it so let's go back to this and on the mesh standard material let's go add some color to it let's say orange we go back it's black again because we don't have any lighting we don't see anything there it's meant to be orange and it is orange but we don't have any lighting next to it so let's go ahead and add some lighting to it let's go above the mesh because remember this is our yeah this is our Cube everything within this this mesh is our box or cube that we've created and then let's add another kind of prop to our stage or canvas let's say directional light and then save that go back and it's still black and you're probably wondering wait hold on it should be orange we've added our light how come we can't see it anymore that's because we need to put it in a position and right now the light is being rendered right in the middle of our box so let's put it somewhere where let's say let's put it on the Zed axis let's move it along there so we type in position as our prop for our react component and let's give it the position of zero on the X zero on the Y and two on the Zed so basically it's closer to us and we go back and here we can see the faint orange on it now this is how directional lighting works and if I give an example of it let's just go on to here lighting 3js and go into images the directional lighting works like this so we have like a uh a point where it's kind of like or a direction in which the light is Flowing um what other examples do we have like this here so we have these Rays coming towards it and as you can see with this sphere or this yeah sphere here you can see that the areas here become a bit dark cuz there less lights Etc all right um there's all sorts of other types of light uh that you can mess around with and I do really recommend checking out the 3js docs as they give you a good overview of the sort of lights that they have so let's go to the documentation type in directional light if I can spell so directional light here and gives you an idea of how this works gives you a nice overview all right so we've added light to our scene we can see now that our box is indeed orange now now let's go ahead and reposition our Cube so back in our code where we have the mesh we can add a position to it and remember we're adding it to the mesh and not the Box geometry because the Box geometry is just a part of the mesh the mesh is the entire thing the mesh takes in a geometry and it takes in a material So within that let's go ahead and say that the position of this is going to be one in the x z in the Y and 0 on the Zed save that we go back now we can see that it's moved slightly over to the right and that's because over on the x-axis so the xaxis going in that direction but now you can see that it's actually a cube so you can see the side of it here the left side of it is it's dark because the way the light is kind of shining onto it but yeah the point being here is a this is how you can position an object but also that it's not actually it's me showing you that it's not actually it wasn't actually a 2d Square all right so let's go ahead and add a few more objects to it actually let's take this and let's copy this and paste it in if we go back we still see what looks like one one Cube or one box but that's because it's rendered on the same place because we never gave it a different position now we can do that and we can just say something like instead of one let's move it on the minus one in the xaxis and now you have two let's go ahead and add two more so let's take this paste it in and if we go back now again no changes because we have to move this let's move this in the y direction let's move it up to two here so we go back we have one here now let's make another one so we have four cubes and change this back to one so now we have four let me just shrink this a bit so you can see so we have four different boxes now or cubes and they're like this all right now you probably wondering like this is a bit excessive copying and pasting you know we could be a bit cleany here so let's go ahead and turn this into a component now I'm just going to go ahead and write the component within the app.jsx file so I'm going to say this one is going to be called Cube and what this is going to return is the mesh so we take this paste it in there hit save now we can get rid of this and put the cube in there so if we go back we have the exact same result I've just kind of cleaned it up a bit but let's add some props in so we know we can change the position of it and change the sizes of them so let's say here let's add in position add in the side and let's also say color let's say color can be customizable so here let's change that to position the color of it we'll change that to color and for size remember we can use the augs here and throw in side like so all right now here we can say the position if I remember correctly is going to be 1 0 0 let's give it a color of say red or let's go with green and the augs let's just or I guess what did I call it it was called side I guess we should call this size makes more sense size or sizes but anyway size and we'll set that to one one one go back now we have the green one here and we can do this for a few through the other ones as well so let's create another Cube uh we need how many of these do we need we need two more let's go ahead and just take the position here copy that in and let's give the color to be pop pink and size let's give that one one one go back now uh we now have the pink one and let's just do that for the other two set this one to minus one two and one and two so I've just kind of just cleaned it up a bit but just I want to show you that you can quite easily just turn them into components and use it as you would re how you would think you can use it in react so this is one of the great things with react 3 fiber is that it literally is it doesn't try and break anything of react in order to achieve what you want so if we go back we now have our four cubes all right so let's look at another type of lighting that we can add just want to give you an idea of the sort of things that you can do so we can add something called ambient light and if we go back you can see that now it's changed a lot the the edges that were once darker a lighter and the way ambient light works is if we go to the docks and go to ambient light so this light globally illuminates all objects in the scene equally this light cannot be used to cast shadows as it does or does not have a Direction so we don't need to worry about that much too much but this part here is very important that the light illuminates everything equally so if we went back and just commented out our directional light we can see now if we go back here that we don't really see the other sides of it because this all the sides have been illuminated the same the same amount but we can also change the intensity of our light so we can say intensity let's set that to 0.1 go back now they look a lot darker actually verging on black but you can just about see that they're faint colored the same can also be done on directional lights so we can also change the intensity on that say intensity let's set that to 0.5 go back you can see it's all a bit dark uh especially the the non front facing sides but all right this is how the this is a bit of a taste of how lighting works but you can also group the object so right now we have four different cubes so in order to group them we can just do something like group like so and then add group here as well it save doesn't change a thing but what this allows us is it allows us to move all of them at the same time so or reposition them so we can say position and let's set the position to that to be minus one so let's move them down a bit so if we go back now they're in the center so you can move all of them using this group uh this group tag so that's just something that's I guess to throw in there can be very useful especially when you've got many different objects around uh to group them but all right that basically covers the very basics of rendering a shape rendering a cube in our case changing the sizes the colors of it the position messing around a bit with the light but now let's go ahead and Spice up a bit and add some animation to our application in order for us to understand how animation Works in react 3 fiber we have to get used to this custom hook that comes with our 3F called use frame now use frame is or a hook that basically allows us to run a callback function on every frame now what do I mean by every frame you can imagine like those old fashion movie reels where you have something that looks like this and each frame is every little kind of rectangle that you see here so as the movie or as the real spins you see the movie play out on the big screen so that you can imagine that's what a frame is kind of get that into your head as it at least for me it helps me to understand how frames work in react 3 or 3js in general now react 3 fiber comes with some param or react 3 fiber use frame comes with uh a set of parameters with it as well we don't really care so much about the XR frame for the purpose of this tutorial but rather the state and Delta now the state contains various properties and details about the current scene so all the information there such as the camera and the uh objects Etc whereas the Delta is the it represents the time in seconds since the last frame so yeah this will be very useful and you'll see in a second how useful that can can be when it comes to rotating our shapes and moving them but all right without further Ado let's go back into the code I'm just going to go ahead and comment out this here oops and what we're going to do is we're going to animate our Cube so let's go back to our Cube here and first we need the use frame that we were just talking about so say use frame and this has automatically been imported for me but this comes again same place where canvas comes from from react 3 fiber now in here let's have our function and all right so what we want what do we want to do what do we want to do to our Cube let's say we want to rotate it on the x- axis so let's go ahead and access States and Delta and it'll become a bit more clear as to why we're using it in a second but we also need to add a reference so let's just say const ref equals use ref from react that again has been imported for me right here and let's add that reference point to our mesh so we'll say ref equals ref all right and now with this reference we can access our Cube so inside this let's say ref do current dot so standard re here but we can also access something called the rotation and we want the to rotate on the x- axis and then we'll say plus equals Delta and remember Delta is the difference in time between the current frame and the last frame now down here let's go ahead and add our Cube back in so I'm just going to say here Cube and let's just set the position to be in the middle and then size just set that to one one and one oops and let's just give it a color so we'll say color and we'll add orange all right so let's go back to our render and now you can see it rotate and you can see it also takes into account the light so the directional light that we have you can see it gets darker and it gets lighter as it gets closer to the light all right so what about the the use frame itself so let's actually have a look at what use frame is doing so I'm going to go ahead and console.log the first the Delta and remember the Delta is just the uh it just represents the time in seconds since the last frame so if I save this and I go back open up the console and I should just close this here but we can see here the numbers whizzing around but if we scroll a bit we can see how like for example this one here this if I zoom in maybe this 01470 so that was the time difference at one point between one frame and another and it changes of course because you know a computer cannot guarant the exact same value each time especially when it comes to a frame so yeah that's our Graphics time or our Delta in motion now let's have a look at what this state is let's see what that's all about so if I go back here and click save go back let me just refresh this but you can see this printing out or consoling it out and let's open one up so inside this so I've just picked like a random random object of the ones that were printed out we get a bunch of information so we get information about the clock uh how much time has elapsed so in this case like 15 seconds um when it started all of that get information about the camera and the camera we haven't really looked at yet but um what else do we have here we have the position of the mouse which can also be very useful especially if you're creating like I don't know Mouse based uh animations and a few other things so we're not really going to go too much into it but just to give you an idea of what's inside this state object all right so let's go back and let's go ahead and get rid of this console.log right here all right so what else can we do let's let's play around with it for a bit so let's also rotate it on the Y so let's say ra do current do rotation and then y and let's do the same here plus equals Delta now if we go back now it's also rotating as well as on the X but also on the Y but we can also make it a bit faster let's say we want it a bit faster on the Y AIS let's multiply that by two go back and it's rotating a lot faster on the Y you can increase it to some ridiculous number let's say by 100 if we go back see it really spinning now I don't know if that's attractive to anyone if you actually had this on your website but yeah I guess it looks kind of cool but let's just get that back to two all right so that's our Cube rotating right now you can also rotate it on the Zed axis as well if you want but what about moving the cube so let's go ahead and do that so let's do ref. current. position and then instead of rotation in this case we're using position and let's change it on on the Zed axis cuz we haven't done much with that let's say that plus equals Delta what will happen with this if we save and go back you see it kind of moving close to us and it hits us and then it's past us and it keeps going down the Z axis and you'll never see it again unless you refresh the page and you get the same thing but what if we want it to come back so it doesn't like leave our our view well we can make use of some mathematics here so let's go ahead and have a look at the sign graph and some of you might be a bit annoyed at me cuz I'm throwing you down memory lane with trigonometry but the you can see here with the sign graph or if I get a nice graph of it let's have a look um let's take this one open image and new tab here we go you can see that with sign it kind of goes up and down up and down so it's kind of rebounding back and forth the other one is also cause um so we can use a cause um function as well so cause graph if we open that it's another one so we can kind of make use or leverage our knowledge in mathematics here don't worry you have to have to calculate sign on your own we can use JavaScript for that so here let's say we want the Zed position to equal and not plus equal cuz we don't want to add it onto our Z position math. and then let's get the state and then clock and then elapse time and let's multiply that by two and I'll show you why elapse time in a second let's also console. log the elapse time so clock and elapse time all right let's go back let's go back to our Cube and it's kind of going going backwards and forwards so it's like boomeranging towards us and if we open this up we can see that the elapse time is increasing so after each frame and we're running the sign on that so if we run the if we look at the sign graph is basic going to be between zero and one and it's going to go backwards and forwards depending on the x value so as we kind of go along the x-axis it's going up and down that's why the elapse time is useful here if we use something like Delta and remember Delta was a value that was typically in the like close to zero so not point0 one .04 whatever um that's too small for our sign language to really pick uh Sign Language sign function to really pick up you can of course add a multiplyer to that but yeah this is where the elapse time can be quite useful but all right this is the very basics of animations pretty much covered so we've rotated it we've moved it as each frame progresses but now let's look at other shapes as well because right now we're looking at a cube let's spice it up let's add some Tauruses in there let's add some spheres in there and see what we get so for our next geometry we're going to look at the sphere geometry now this geometry as you can see here on the 3js documentation takes in a set of parameters so in this case it takes in the radius width segments height segments the feast St Fe length Theta star and Theta length and it gives you a good idea of what each of these do exactly and here we also have like a cool debugger tool where we can kind of mess around with these parameters see what we get out and this is a great place for you to play around with um different um kind of sizes different sort of values and see what you would like now we'll also be looking at a debugger tool later on in this video but for this this part we'll just be looking at the geometries so let's go ahead and Implement a sphere geometry now back where we had our Cube you can see that we used something called a box geometry in our case we're interested in something called a sphere geometry I feel like I'm repeating myself but just to make sure that I'm getting the point across so if we click inside this box geometry we see different types that come with react 3 fiber now we have the box geometry you have another one called capsule geometry we have like a plane geometry to geometry all of these things and we're interested in the sphere geometry so let's go ahead and create a new component just like we did with the cube and say con we call this sphere and let's also give it the same props that we passed in for the cube so let's just paste that in then let's go ahead and return the mesh oops not going to auto complete so mesh and and then let's add in the sphere geometry not buffer geometry but sphere geometry like so and let's also give it a mesh standard material all right so let's go down here and I'm just going to comment out the cube that we had and let's throw it in the sphere now if we go back to our code you can see we have a sphere and it just fills it in with the default values and here we can see what those default values are so back on the 3js docs the radius is one WID segments is default 32 and the height segments is 16 so we go ahead and play with these so inside this let's give it some values let's set the position first so we'll just it will remain unchanged so it'll stay in the middle that's all well and good then let's go ahead and add some arguments to it so let's say the values so we're going to set the radius of it so we'll set that to one and remember it's in a list so one let's set the tube radius to say 30 and the radial segments to 30 as well you may not see a huge difference but we have a very similar case we've just changed the number of segments so I guess the more you increase it the more detailed it becomes as you can see in the demo and 3js so as we increase a width segments and the height segments it becomes more spherical there less sharp edges on there and as we decrease it you can see it becomes sharper on the edges depending on the height or the width all right so let's also just give it a color as well so um oh wait we weren't even changing the position so let's just make sure we have that there in the mesh if you caught that by the way great one um we'll say position position the augs we'll set that to size maybe we should call that augs as well color we'll set that to color let's just go ahead and change this here so let's say color orange and if we go back there we go all right let's look at our next shape the next one we're going to look at is the torus so back in the 3js docs let's search for a Taurus in the top left corner so here underneath the geometry section we see tourist geometry let's click on that and we get this donut like shape like if you're a fan of The Simpsons maybe you can reference this to Homer but as we increase the radius you can see that change along with the tube thickness of it radial segments tubular segments and also the arc let's go back and add that in so in our code I'm just going to go ahead and copy everything that we have in the sphere let's paste that in let's have a look at the call this the Taurus change the geometry forus geometry and let's go ahead and make use of it so let's throw that in there Taurus let's give it a different position so let's say the position for the Taurus we'll put it more on the left side of the sphere uh on the xaxis so we'll say two zero then we'll have augs and in the arguments I guess these should be size and size and here we'll say .5 0.1 and 30 30 let's try that out color we'll give that a blue let's go back now and we can see our Taurus right there maybe we can increase the radius a bit so let's set that to one maybe save that go back yeah a bit too big maybe it's adjusted so maybe .8 there we go so now we have our Taurus let's look at our final geometry remember there are many geometries that we could look at but just to give you a flavor of some of the more complex ones compared to a cube or a box I'm going to have a look at the Taurus not geometry so just here and we have this Taurus but it's kind of like twisted and it's all going it's all intertwined and again we have our parameters radius tube tubular segments radial segments p and Q let's go ahead and play with that so I'm just going to go back and let's take this Taurus let's copy that and let's paste that in call this the Taurus knot and change geometry to be a Taurus notot geometry like so all right let's go ahead and throw that into our canvas forus not and we'll set the position to be say minus two so more on the left side I think I said left side for the Taurus I meant right so bit of a long day but anyway all right so for the size let's go ahead and say 0.5 and then here 0 one add a th000 for the it would be the tubular segments and then 50 we can always play around with these values let's just throw some random ones in and for this one let's say this is hot pink because because why not let's have a look so back here now we have our tourist there as well cool so let's go ahead and yeah let's go ahead and and animate them just to get some of that practice in so for the taus knot let's do what we did for our Cube and let's copy in all of that from the cube back in our Taurus knot let's paste that in this is more for just practice making sure that we get familiar with our frames and animating them and let's go ahead and reference that to ref all right let's go back and now we see our our spinning and moving our Taurus as well back and backwards and forwards let's do that for the sphere as well kind of look cool as we're looking down on like a bouncing ball maybe so let's take the sphere which is right there let's copy all of this and paste that in and let set the reference to that as well so ref Excel and now we have the same for our sphere but one thing that annoys me a bit with the sphere is that we can't really tell that it's a sphere like you may do this and you might say oh I can't really see the lighting or you want to see finer details of your geometries there is one cool thing that we can do which is show the wireframe and for that actually I'm going to go ahead and change the background to be black so back in the CSS I'm going to set body and then background color I'm just going to set that to Black like so go back now now everything's black all right so back in our app where we had the sphere let's go ahead and in the mesh standard material we can add something called a wireframe and just add that in Boolean value but now we see the wireframe of the shape itself which looks pretty cool on its own as well like has this kind of cyber Punky kind of feel and yeah that's a nice way to see uh how like your segments are how many segments you have and how they look your height Etc and you can do that for all types of materials as well so we can do that for our tourus not and our tourus as well but all right that pretty much shows you how you can use different shapes and how they work and it's always a good idea to look at the 3js docs when look using the shapes that come with this as you get to get a better idea of like the sort of parameters that they take in and play with them as well but now we're going to go ahead and look at interactions so for interactions it would be cool if we could you know kind of hover over an item and it would do something maybe even click on something so let's have a look at how we can do that and let's go back to the code what I'm going to do let's just focus on the sphere for now I mean you can pick whatever shape as we're not going to be messing too much with like the size of these objects anymore and down where we have our canvas I'm just going to go ahead and comment out the Taurus and the Taurus knot and the reason why I'm commenting it out is cu I want all this to be on GitHub so you guys can of course see like the code that was written so we go back now we just have our sphere now the rotation is a bit too fast for my liking so let's go ahead and slow that down a bit so if we go back to our sphere we have that right there now for this let's just say we let's just remove the bouncing up and down and let's just we just have it rotate on the Y AIS and let's slow this down quite a bit so let's set this to like 0.2 and if we go back now we just have a very steady rotating sphere and we see the wireframe of it as well looks kind of cool but anyway let's do something so that when we hover over it it changes like we can maybe change the color of it as we hover over it so in here let's go ahead and make use of some of our old react friends say con and is hovered and set is hovered now here we'll say use State and we'll set that to a default false all right so what we want is when we hover over this we want it to say change color so instead of it being orange we'll set it to light blue so how can we do that so the first thing is in our mesh we can use the following props so let's say on pointer um enter we'll use the events that comes with that and then say let me just shrink that a bit and say event do stop propagation and then set is hovered to true now just a quick explanation of what this stop propagation is it just ensures that when our Mouse enters the mesh the event is contained just to the mesh so no no other element in our react application cares whether or not we entered the sphere or not all right so we have that and then let's let have our on pointer leave and for that let's just say the moment we our Mouse leaves it then we set is hovered to false all right so if we go back we shouldn't really see a change only when we hover over it but now in our color we can say something like this so let's add a fixed value so if is hovered then we want it to be orange otherwise set it to say light blue we go back now when we hover over it it becomes orange when we leave it it goes back to light blue so pretty cool so that's how we can use like is hover or hover over our objects using the sort of um code that ships would react anyway all right so that's when it that's what happens when we hover over it what about if we change speed as well so can we also use this information in our use frame so let's go back to our sphere and in use frame let's do something like this let's say con speed equals is hovered so if it is hovered we want the speed to be one otherwise we want it to be 0.2 now when we can now we can change that to multiply Itself by speed so if we go back if we hover over it goes faster let go it stops hover over it faster let go stops so that's how we can use interactions uh to change like the speed we can also do something like changing the size so you can really go wild with this uh I'm just like showing you the basic examples of this so what if yeah if we clicked on it the size changed so let's go back let's add another one let's just copy this and paste it we'll say is clicked and then set is clicked now if we go down we can say on click and set is clicked to not is clicked all right so we can also if we go back if we click on it nothing happens but let's say we change the size every time we click on it now mesh also has a prop called scale and we can set that we can change that so what scaling does is it takes the initial sh shape and E either stretch makes it bigger or smaller so we can do is clicked and we'll say scale it by 1.5 otherwise leave it as is let's go back now if we click on it becomes bigger click on it again smaller so that's how we can also use interactions to change the size but that pretty much covers like the basics of like interacting with our objects next I want to show you this really cool Library this kind of plug-in with react 3 fiber called dry so dry or three in German is a comp Canon library to react 3 fiber and what it does is that it provides a collection of helpful utility components Hooks and helpers that basically simplify the process of creating 3D scenes in react and 3js so for example a lot of the stuff that would take quite some code for us to implement like I'd say rotating a a object with our mouse or moving around the screen that would take quite some code and what dry does is it kind of provides us with help functions like that so very common sort of functions that you would tend to use in uh react 3js now it also offers like a bunch of other really cool kind of fun uh helpers and we'll explore a couple of them in this tutorial now I'm just on the GitHub for dry so it's by pm and DRS the same guys who are behind react 3 fiber and the community that's also helping them build it so big shout out to these guys but let's go ahead and have a look and yeah basically just start using it so in order to install it the installation is mpm install react 3 dry so let's go ahead and copy that I'm just going to go back over to the terminal and just cancel this for now and let's paste it in all right so we're all Now set up with dry so let's go ahead and run this mpm run Dev okay so what we're going to look at first so let's go ahead and add something where we can rotate around our sphere so I'm just going to actually let's turn this back into a Taurus so I'm just going to Common this out and yeah let's go with the tourist knot so bring that back in just so we can mess around with some of these shapes let's change the position so let's set that to zero the size of it yeah maybe we can maybe increase the radius a bit let's set this to one maybe see what happens all right and let's just stop this rotation that's happening in the tus not so just here just going to comment this out um actually I'm just going to comment out the use frame all right so if we go back we have a stationary Taurus and what I want is for us to basically rotate this thing so how can we do that well it's fairly simple with with dry so all we have to do is use this things called orbit controls and this automatically imported it for me if it hasn't for you then you can of course just import it like so so import orbit controls from react 3 three dry and notice the dry it's coming straight from the dry library that we just installed okay so let's go ahead and fix that so we're all up and running now and let's go ahead and check it out so we already know what we kind of want to expect we want it to rotate around our tourist so now if I click and kind of move it you can see how we're kind of revolving around or orbiting our tourus knot now you can also scroll so if you scroll in and out you can zoom in and out of it so that's pretty cool we already have that out of out of the box with react dry we didn't have to add anything in we just have to throw that component in with it so you can zoom all the way out and zoom all the way back in which is pretty cool all right so that's like the first part of orbit controls but let's say you didn't want to have that whole zoom in and now how do you how would we stop that well the cool thing is in Orbit controls we have the props that come with it so we can have a look at some of the stuff that comes so we have you know rotate auto rotate speed um stuff to do with the camera the enable pan enable rotate enable Zoom so maybe we can use that so if we say enable Zoom to false and we go back now if we try and scroll we can't in fact the the page itself is bouncing up and down because it thinks that we're trying to scroll so but we can continue rotating it so we can rotate but we don't have to scroll which is pretty slick what else do we have we have see we even have minimum Zoom so we can even mess around with how much we're allowed to zoom in and out of it and yeah so that's some of the cool props that come with orbit controls so that's one thing that's there with our dry what other cool things can we get out of it let's have a look so we go back to dry scroll down see what else there is so we have a lot of things around abstractions or gizmos um let's see there's something called wobble so there's this thing called mesh wobble material let's see what this does let's go ahead we can see that they've given us a good idea of how this is to be implemented so let's try that with our Taurus knot so back in our component check the Taurus knot and instead of using mesh standard material let's go ahead and use the mesh wobble material let's do mesh wobble material and set it like that let's go back and now we can see that there is some kind of wobble going on it kind of looks like it's rotating but we can kind of see how it's wobbling if we rotate it a bit around it like the whole thing is kind of just yeah like wobbling I guess what else does it say in the docs so it has like a factor and a speed so let's mess around with the factor let's say factor is five what happens then so it's wobbling even more there's more of a kind of wobble and twist going on the speed of it let's increase the speed see what happens so that to 20 let's go back now it's going crazy so let's maybe change that to say two B slower that's pretty cool has this really abstract kind of look going on that be nice for like an intro to a website maybe but those are some of the things that come with react drive so there's a few other cool things that we can have a look at so let's go back for example let's see the mesh distort material let's have a look at that if you click on it it will send you to like a code sandbox let's see what this gives us so they've got this cool kind of gradient plane where when we move our Mouse over it kind of reacts to our Mouse position and kind of wobbles with it and if we look at the implementation everything seems to be coming right out the box with react dry so they've got this use cursor so it kind of works with how we use our cursor and I guess this works with hovering over our mesh object so it can detect it better and we have mesh distort material which I guess gives us this wobbly kind of feel to it but yeah there's quite a lot that kind of comes with react dry but one thing I really want to show you just before we leave off the topic of dry is if we head back to our code or our example so we understand we know that there's light being emitted onto our object we can see from like the the shades uh or the shade of our material changing depending on how close or how distant or how hidden it is from our light but we can't really see the light and that sometimes might be a bit annoying especially if you're trying to adjust where the light is shining now we can change that we can add a helper to it so that we know where our light is and to do that we can use a hook that comes with dry called use helper now let's head back to our code we need to do a bit of refactoring before we do this because we cannot use our hook in the same component that is R is returning our canvas so what we can do is take all of this so let's take everything in between our canvas let's just copy all of that cut all of that and what I'm going to do is create a new component we'll call this one scene and and we'll return everything that we just took out and of course let's just wrap that around with some empty tags and paste that in here as well okay and let's then just throw our scene back inside our main component so our app component and we go back nothing's changed but let's have a look at this use helper so if we go to our scene we have our directional light and our ambient light we know with our ambient light that everything's lit up the same amount so we don't really have to deal too much with our ambient light we kind of understand how that's going to work but our directional light we don't really we can't visually see where it's positioned so to do that let's go ahead and create a reference we say const and directional light ref and set this to use ref all right then with our directional light let's go ahead and add ref and say directional light ref and again if you haven't noticed like my code format on save so just in case you get confused as to where the lines are all jumping around but now we can say use Helper and then in there we can add say directional light reference and then we type in the name of the object now this is something that you have to keep an eye out for so we've called it directional light Helper and if we go to the top it's been automatically imported for me it's coming straight from the three Library so the the actual 3js library and we need that because we need to tell it what type or what type the object is and let's add some let say 0.5 to give it a SI a size and we'll color it white now if we head back we can see this kind of Square being formed this sort of plane and this kind of line and that's showing us where the light starts and how it's being like sent to or the direction in which the light is traveling so we can change the position so if I change the position and say it's increase it by one in the y direction can see it's gone up a bit so if we just re start that and you can see it's kind of like pointing in that direction so this is a great help helper for when like dealing with lights you can even apply it to other objects but for lights I find this quite useful especially as a beginner because you know I mean not even as a beginner cuz you know you want to know where your light is where it's where the direction of that light is going so that can be quite helpful but now let's go ahead and look at a another Library which will help us debug whilst we're in the browser and what I mean by that is we've seen throughout this tutorial us jumping back and forth from our browser to our code editor back to our browser changing different values tweaking them and seeing what they what the output would look like but what if we could do all of that within the browser itself luckily for us we have another Library developed by the same people who worked on dry and react 3 fiber and this is called Laver and Laver provides us with this cool like UI where we can toggle different values such as colors um values for numbers in terms of whether it be like your radius or your position let's go ahead and try this one out so in the GitHub repo for lab uh I'll also add this in the link I'll add a link in the description so you guys can of course check it out and it's also giving a warning that this uh repository is under heavy development so I guess we can if something does break you know don't go crazy because they did warn us so let's go ahead and use it this say copy that head back let's go ahead and install it all right now that install let's go ahead and continue running our application and in order to use the first thing we need to do is add it into our main. jsx file we don't have to do this but I tend to do this let's just paste that in there now back in our app.jsx file there's a hook that comes with labor and that hook is called use controls they also mention it here this use controls so all right where should we use it well why don't we go ahead and try it out on the light so let's say we want to change the intensity of our directional light so this light that you can see being emitted from this square or this kind of helper that we added so to do that let's go to our scene and let's go ahead and say const let's say we want to mess around with the light color and the light intensity and then just to use controls which for me automatically imported again from Laver but you can see here that the import statement is like so all right so back where we were use controls and let's go ahead and first let's just add light color let's mess around with that let's say the default value for light color is white now if we go back to our directional light component let's go ahead and pass that prop in say color equals light color now I'll head back and as you can see here on the right side we have this this uh debug UI where we can change the color so if I click on that and change the values you can see how it automatically changes our object or the way the light is being emitted onto our uh object so say we can go for something like pink make it quite bright and you can see that those changes happening in real time that's cool so what about the light intensity how can we do that so with the light intensity what I want to show you is how we can kind of customize the the way in which we allow certain values so let's say the default value so value is going to be 0.5 so that's going to be the initial starting value let's then say that the minimum value that this can ever achieve is zero and the maximum let's say five you can put whatever numbers you want just as long as they make sense and the Min is smaller than the Max and let's go ahead and pass the light intensity into our directional light let's say light intensity so if we go back now to our example as we increase the light intensity that you can see here you can see how that is reflecting the same change so we can then change the color we can increase the intensity of it giving it a nice effect until we kind of find what sort of values we think look good so now we know that this color works this uh 7f 577 F and the light intensity of five looks good so that could be one reason why or one cool way of discovering different values but we can also change the way in which the value in increments so we can say step and we can say increments by .1 so if we head back now we can see as we change this it goes down by .1 which can also be quite helpful so this is just some small things small change that you can add Tob to make sure you kind of find the or build out the best debugger for your application so that's it for the the the light let's go ahead and apply it also to our shape because you know we want to know what's the best shape for our tourist knot so inside tourist knot let's go ahead and do the exact same thing so let's say once let's say we want want to mess around with the color of the Taurus knot and the radius and remember the radius is the first value of the augs list that we pass in say equals use controls and let's set the color to it's originally light blue and it will be complaining because we're making use of color and then let's say that the radius so the exact same thing say value is five the minimum can be is One Max say that's 10 and the step is 0.5 all right so if we go down and let's change some of these up so let's say that the color for this is going to be color let's just get rid of this color here and then the radius so the first value in our augs let's go ahead and just use a spread operator say radius and then spread the sides so back in our scene just get rid of that first value in tourist notot and let's head back so now you can see we've got this like really big radius right now it's set to five looks kind of cool looks like we're in I don't know some I don't know what that looks like it's like in a bowl of purple spaghetti fooling or something I don't know but let's go ahead and mess around with these colors so let's change the color of that to let's say something blue or let's make it even spaghetti like let's have a look what's a good spaghetti color say something like that maybe maybe increase the light a bit the radius let's make it even stringier bigger so it's kind of cool that so yeah this is how you can really mess around with Laver to really find like the best sizes and the best colors etc for your um 3D objects and of course you can do a lot more definitely recommend trying out Laver this is of course just like a tester or a taster of things like dry and lab and even react 3 uh fiber but that pretty much brings us to the end of our tutorial uh I'm really curious as to what you guys build so yeah uh tweet me and show me your uh Creations I'll add the link to my Twitter in the description and um otherwise stay healthy stay safe and I hope to see you in the next video

Channel: rithmic

Views: 12,228

Keywords: React, ReactJS, ThreeJS, 3D Web Development, 3D Web, React Three Fiber, R3F, Software Engineering, Web Development, Interactions, Web Experience, pmndrs, THREE, JavaScript, vite, computer science, graphics, WebGL, Programming, Tutorial, Programming Tutorial, Computer Science, Computer Graphics, 3D Rendering, Internet, Software Development, UI, UX

Id: vTfMjI4rVSI

Length: 70min 56sec (4256 seconds)

Published: Wed Oct 04 2023