Working with Three.js Particle Systems - They're AWESOME!

today we're going to be doing this here within 3 j s look at that [Music] what's up everybody gary simon here so today we are stepping back into the world of 3js uh to learn more basics and fundamentals and of course you can't talk about 3js without talking about particles they're very fun they add texture and they add a lot of different things and aesthetics to your design so we'll be checking out that just to show you real quickly the project again uh if i refresh we have an animation this is help and this is created by gsap these very simple animations um we have you can see custom little particles they're actually little crosses you can see in the background i'll show you how to do that we have this geometry here that has their own particles as well which gives it a very interesting aesthetic and yeah that is basically it uh make sure to check out the uh 3js playlist that i've created here there's about four other videos so far i've created within the last month or so um and especially if you don't check out all of them make sure to check out the first one because i will be describing the the boilerplate code because we will we will be starting the project off not from scratch we'll be using um a github repo that i created for this purpose so anyhow i'll stop talking if you like this make sure to subscribe and let's get started now wait one second you're about to watch me work with some intermediate to advanced front-end development stuff now if you're not very good at front-end development like in terms of html css and javascript make sure to check out the front-end developer career path at scrimba.com they recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so basically here is the 3js webpack starter and i've already explained this in the first video that's a part of this playlist um and we're gonna use this just to get up and running with a quick boilerplate so we're gonna go to code and copy this address and i'm gonna go to my visual studio code i have a just like a new window open but no folder we're gonna go to terminal um and actually now we're gonna go to view and terminal and then down here we're gonna to hop into our code folder wherever you store your projects at and i'm going to git clone so you're gonna need the git client google that in terms of how to install that depending on which os you're using and right click to paste that and then we'll give this a name of like particles something like that all right cool now let's cd into particles and then we'll run uh npm i to install all the dependencies that are part of the project that we just downloaded and it should go pretty quick um and then we'll go ahead and um npm run dev in which case it will launch a quick development server and your browser depending on what is default and here we go we have the spinning red taurus in the middle all right so let's go ahead and now open up that folder so we're going to go over here i'm going to go to code we're going to go to particles which we just installed select folder and there we go we are inside of it so we're going to go into source and then we're going to go to let's see here script.js all right so this is where we're going to be working for the most part now this whole file right here i go into more detail in the first video that's a part of this 3js playlist so make sure you look at that it would also probably make sense a little bit uh to check out some of the other videos before watching this one although this one's really simple itself so at least just watch the first one okay so right now we have a single object and that object of course is that spinning red taurus right here so this object it has its own material already um it has it's defined right here under material here's the object geometry now remember when it comes to having objects in 3gs you have to have it's like a three-step process the first thing is you have to have the skeleton which is the geometry you have to have the meat which is the material and then you have to have the mesh which kind of combines both of those right here and then you add it to the scene so really it's kind of like a four-step process and what we want to do is change the material here and we want to make it look like it has particles on it and this is a very quick and easy way of getting up and running um with eye particles essentially or it just they look like particles on your your geometry that's already defined so what we'll do is we're going to delete this we're going to change this to a points material we're going to open up the options here in an object and um for now we're just going to leave these empty but we can't use three dot mesh to create a sphere that has a points material we have to change this to three dot points so it was mesh but now it's points all right um if we save it let's check out what's happened okay nasty i don't know what i'm looking at so the one thing we'll want to do is put in transparent true and save that obviously that doesn't do um so we're gonna put in size 0.005 or so and of course these are values that you can experiment with and there we go all right oh let's uh get that back so as you can see very cool looking it presents you immediately with a very interesting aesthetic albeit an aesthetic that you definitely don't want to overuse and use in every project um it has to have it has to make sense of course um but we're not gonna get into that too much i just want to get into the technical know-how of how to to create stuff like this so obviously when it comes to um the size uh you can easily start experimenting with the size of these points um that's 0.1 so obviously you want to go you know quite a bit lower depending of course on the aesthetic that you want and so you could do this with any eye object that you have already defined within 3js just to create a real quick particle aesthetic now what if you wanted to create your own custom geometry within 3js how do you do it then then it becomes a little bit more of an evolved process so for instance we all have seen you know the various there's been there's so many different types of particle-based backgrounds and and not just backgrounds but other custom particle effects uh we're going to create one kind of like uh just your your typical star field of sorts and then we'll make it move and interact based on mouse position and all of that fun stuff so to do that uh we're going to create another piece of geometry all right so i we're going to have one over here we're going to call this const and we're just going to call this uh particles geometry equals new 3 and buffer geometry all right so you also have to determine how many particles that we want and we're going to define that in a const and we're going to call that particles count equals and then we'll just go with like i don't know 5 000. all right so now after we have that we have to create a float32 array all right and so we're going to call this position array and this the the purpose of this property right here is to provide us with an x y z uh coordinates for every single particle and of course if it's 5000 we're gonna have 5000 times three because when it comes to 3js and geometry uh each of your your particles or your vertices whatever you want to call them have to have an xyz attached to them so the float32 array basically does that and i'll show you um what i mean more specifically so we're going to put equals new and it's going to be float 32 array we take our particles count and multiply by bl well that multiply that by three and so what ends up happening is it's kind of like x y z x y z x y z x y z um and that's how this float32 array for position array is kind of structured all right so then we're going to iterate over these with a for loop so let i equals 0 and i is going to be less than particles count times 3 and then i plus plus will increment it increment it each time all right so as we go through this then we're going to specify the position array we pass in the i value and so this is basically x y z and then x y z then x y z and we're going to put in just for now math.random all right because we want these you know when it comes to a star field they're just kind of randomly position each star or in our case a particle um so we can't just save this yet we haven't added it to uh the scene so what we want to do now uh the final step in this before we get to add it to the scene is we're going to take our particles geometry and we're going to set the attribute of each one of the particles and it's going to be the position attribute and new 3 buffer attribute the position array which we've defined above in the for loop and then we pass in three all right i know it's a little bit convoluted looking but basically what this is doing is it's taking um the this position array that it's created and it's gone through and added these math random values for each one and it's setting the attribute of the position the position attribute rather of our particles geometry from this three buffer geometry up here um and just assigning all those random values x y z xyz to all 5000 of the particles all right so now what we can do is go ahead and we can come down here and we can create our const i will just call this particles mesh i guess equals a new three dot points same exact thing we're going to pass in our particles uh geometry and we'll pass in our material for now all right after that we're going to specify particles mesh as well all right so this isn't going to give us the desired effect and of course it's aired particles is not defined where am i at let's see here up particles count there we go now let's refresh and here we go so not exactly what we wanted obviously um so the first thing we want to do is get this position here in the center all right because it's up here on the right and to do that oh by the way something really funny i already just recorded this whole tutorial it was like 45 minutes long and then i realized i clicked this little button on my mouse which switches my camera from my desktop to me and so half the video was me so i have to re-record everything that i already did uh it sucks okay anyways that's the life of a youtuber let's go ahead shift all down to replicate that and we will comment that out with control forward slash and to get that to the center we're going to put minus 0.5 all right so now if we save we'll see now it is in the center of the screen now what we need to do is we just need to disperse the particles more so in every direction so that it consumes the screen so all we have to do is multiply it by a certain factor so we'll go ahead and comment that out we're going to put these in parentheses to perform the action first then multiply the result by 5 or so and of course you could play with that number just to see what happens and there we go very very very simple um you can also do other things don't be afraid of playing around with the math even if you don't understand it for instance i was trying to see what else i could do and so what i did is i decided to wrap this in parentheses a math another.math.random and multiply that by five and what happens then well actually it's kind of hard to tell but you can see uh there's a lot of particles that are kind of situated more so on x and y in the middle and you can really see this if you bump this number up from like 5 000 to 50 000 particles so it creates this very interesting you know cool effects that um you know you might stumble upon by accident i'm gonna leave it like this though all right so now what i want to do is i want to create two different materials so that we could control this taurus material independent of the background so let's do that real quick so what we'll do is we'll take this we're going to call this one we'll just call this particles material yeah particles material and it's going to be another points material so we're just going to put that right here in particles mesh so now nothing's going to change of course because they're exactly the same but let's give this one the um the the star field essentially some different properties so that we can experiment with with it so let's say for instance we don't want these these default squares we want to use a custom texture or sorts of sorts so i already created um a ins the static folder uh cross.png now if you downloaded the starter this is not going to be in there um i'm going to try to remember to create another github just for this project and you can clone that and then you have access to this little cross.png graphic it's only like i think it's like a 10 by 10 it's just like uh it's alpha so the background's transparent but there's a white cross in the middle that's all it is um so you can create this easily on your own if you wish like in photoshop or whatever so if we go back here um what we want to do is we want to use a texture loader to get that in there so we're going to say const a loader oops loader equals new three dot texture loader and then we're going to say const uh we'll call it cross equals loader.load and then we don't reference the static folder that's inherent already so we just put like forward slash cross dot png now we come back down here and then we simply use the map property cross now what's going to happen nothing why because there's transparency that's baked into the png but we have to tell our material that it is transparent true all right so now when we do this we see these little crosses which is pretty cool um it's not that cool yet what if we want to change the actual color well you can do that so we can do color blue for instance oh that's not good what did i do oh there's a there's a comma that i forgot to add there we go so you can see you can change these to all different colors you can you can animate the colors if you wish and the colors also can work without these two properties here so if we save this it'll change you know the default uh squares as well so let's leave that there and also there is blending so if you're familiar like with photoshop or you know any of the graphic design software like figma or xd uh like blend modes there's blend modes as well we won't be able to tell in our particular particular example but this is how you would do it it's the blending property with like three dot additive blending like i said you won't be able to tell it in our example um but you do have that option i i think you can really tell like if you have a ton of particles that have transparency baking in um but but yeah nonetheless actually let's just try it now i'm not sure because i didn't experiment with this beforehand but if we take our particles count and go to like 50 000 i'm not sure if we'll be able to see a huge difference no uh but but either way you do have uh different types of blending that you can use so let's go ahead and just get rid of that um and also i don't want that either i'm just going to leave this normal leave this back to 5000 and this is our result okay let's change the background color um and so in previous videos that are part of this 3.js playlist here on youtube i was just changing the i was making the renderer uh transparent and then i was changing the background in html through the on the body selector but we could just change the background here as well within the renderer so right down here we're going to specify our renderer set clear color so render a set clear color and then we put in a new three dot color and we specify the following color code 2 one two eight two a and then one for opacity so there we go it's kind of like a dark desaturated blue um obviously not quite as dark as the black that we have before but this works here i like it a lot all right so now let's make this move like the star feel background um so down here is the tick function and request animation frame which is you know just inherent with javascript has nothing to do with 3gs we'll call this on every frame so like 60 seconds this is being called every single time that's how we're getting the sphere to rotate um we want our star field sort of thing to rotate and i think we call it particles mesh so what we can do is particles mesh dot rotation.y just like the above and we can say um mouse y times elapsed time times well let's just do this now mouse y doesn't exist yet so we have to get access to the mouse movement essentially so let's just put mouse up here and we're going to create a an add event listener on the document and we're going to do mouse move and we're going to call a function called animate particles all right so first let's create some properties here and mouse y we want as well and then we're going to say function animate particles we're passing the event mouse y equals i event dot client y and then mouse x will be the same thing awesome so now every time we move um we're going to get the x and y axis of where the mouse position is so then we have mouse y right here so let's save this and now we can move this and it's going crazy and it won't stop moving um this is kind of a cool effect but just a little bit too much what we want to do is we want to multiply this elapsed time this will last elapsed times just gives you like how much time has passed um so what we can do is multiply this by like 0.0008 not four eight there we go save all right kind of uh interesting let's change this um to a mouse wait no change this to x and leave that at y all right uh oh why is that not working no error let me make sure i got this working oh this was capitalized i think my caps lock was on there we go wondering what is going on all right so what if we want to reverse this so when the the mouse goes down these goes these go in the opposite direction we could put a negative right here there we go all right now let's do the same thing with the y so we'll take the y and we'll put mouse x here and of course you could play with these like x could be x or y could be y and putting negatives here and there and whatever you want so it's entirely up to you and there we go we kind of have this interesting sort of aesthetic here now why is it when we refresh and we don't mouse over it's completely not moving at all well we want to fix that and the way we can fix that is because uh what we can do rather is we can say if mouse x is greater than zero then only change these right here so now if i refresh uh i must have screwed up somewhere mouse x is greater than zero oh yeah that's why um silly me so what i want to do is take our particles mesh rotation dot y equals we can just do negative point one times elapsed time all right so now it's going to move and now there we go so refresh we have movement and then it changes and of course you could do with other different things like if you move it like it will gradually slow down based on the direction i'll leave that up to you all to experiment with um so now let's switch roles and get into uh and like more like ui design stuff with html and css and maybe have like some sort of like headline on here and we'll animate it with the green stock animation platform or gsap so to do that let's go over to index.html and in our index.html it's going to be very simple we're just going to have a class of container and inside of here we'll have a class of content inside of there we'll have an h1 the next we'll do a break and then dimension we'll have a paragraph i'm going to copy and paste this just because i don't want to type this all out all right the journey in the next dimension with this crazy particle effect okay and that's it that's all our html be of course we're not going to be able to see it because we have webgl in our css is positioned fixed and it's sitting on top of everything um so what we'll do now is we're going to make our color white because right now everything's black so all of our text will be white and we're going to specify just a few selectors here so for container we'll do position absolute and z index of one so if we save this now we can see our text all right additionally we're going to take our width 100 height 100 viewport height of course if you do 100 view per height on any elements that you want to go all the way to the bottom of the browser you have to put height 100 report height on the body element at least and then we'll also specify display grid and place content center that places everything vertically and horizontally in the center all right next up we'll have our content class and our content will be display flex a gap of five m units so now we have this we'll do a width of a hundred percent a padding top of three m units and then a position of relative now of course this isn't going to change much except just move things down but the reason i did padding is because we're going to have a pseudo element of before to make a border top go all the way across so here's how that looks so we'll put content before and content empty and position absolute so this is another one of those patterns where these two properties work in conjunction with position relative so that when we do top zero and left zero it's in relative if it's it's in relation um to its parent container of content rather than just going to the very top of the browser of top and zero so hopefully that makes sense something i use all the time width will be 100 and then a border bottom will be one pixel solid white and then we're going to transform scale x zero now you're probably wondering why are we or one rather why are we setting it to its default setting anyways because clx would be one no matter what well it's because we're going to use gsap to animate the transform property and so it has to be set already here on this pseudo element so now let's save this and we see this all right things looking a little bit small so let's adjust some things here first h1 font size is four rem units width will be 50 viewport width line height will be 97 not 987 i'm trying to type too fast because i already did this like three times um and then we'll do text align right see what that looks like all right and then we're gonna take our h1 and our paragraph which are flex by flex items and there's gonna be flex basis zero flex grow one and these are two properties you use often just to create a fifty percent fifty percent two column layout okay and then we'll also put in clip path polygon and we're going to put 0 0 100 0 100 0 and 0 0. now you're wondering what that does well it hides everything if we go to css clippy which is a tool i use all the time for clip path makers and we use trapezoid and then we just push everything i believe it's up and that's how we get this value value and that's why everything's hidden because it's only when you use clip path property only what is visible will show up all right and then we'll animate this down into this property with gsap in a second all right so finally let's change the paragraph real quick the font size will be 1.3 rem units and then a width of 40 viewport width and this is what we have all right awesome so now let's go back to our index.html and we have to get our gsap cdn and also the css role cdn so gsav3cn we need to get this so we copy that script tag and then also we need the css rule plugin right here and i'll tell you why in a second so we're gonna do script we'll just write this here in line and basically in order for gsap to gain access to this these this transform scale element because we're going to take that border and just kind of scale it out from the middle um because it's in a pseudo selector or pseudo element we need to use that plugin that gains access to that so what we do is we're going to say cots content really this should be called something more more suitable like border or something because that's what we're trying to animate here css role plugin get role content before all right and then we'll do a couple more we need our h1 element because we want to animate that clip path property shift alt down we'll do a paragraph here because we want that we want to animate that and then we're going to create timeline so tl equals dot oh gsap.timeline so then we say timeline from we're gonna you can also use two we will use two in a second so we're gonna go from these properties that we specify to whatever is default in the style.css so we're gonna take our content which is going to be the border that we want to animate at the top and inside of here we're going to put css rule and then scale x 0. let's save go back and if we refresh we'll see it kind of goes real fast so let's change add a couple other things we're going to delay so 0.5 seconds for a delay for before this begins just to give us a little time so it's not immediate and then a duration of 4 seconds so we'll save this and there we go we'll play one more time all right cool so then what we'll do is tl2 we're going to put in our h1 we'll do a uh duration of two seconds and then a clip path now remember when it comes to css or css in javascript whenever you have properties that are like clip path in css you get rid of this the hyphen and you capitalize the next character so it's camel case so clip path and then we do the polygon where you know it is extended all the way um do i have that up still no i don't okay well you know what i mean um i'm going to copy and paste that here off screen so this is the actual code that we want to use let's save this now here it's going to stop it's going to happen only after this is done we're going to fix that in a second but now it comes down all right so if we want it to happen sooner we put a in the third parameter we put we want to subtract three seconds of course you can plus and add you know as well if you want and there it goes it happens faster now we're going to take this change this to a paragraph this is going to be a duration of four seconds the clip path is the same and this will just be an offset of only two seconds compared to three so now we'll see them both come in and then finally one last thing that we'll do is we're going to take both of them and make them fall down so we'll put y and 30 pixels or so so copy this paste that and they're going to subtly fall down kind of like that and that is it very very very cool stuff hopefully you learned quite a bit here all right so hopefully you enjoyed that and learned something new make sure to check out the whole 3js playlist if you haven't and there's a lot of other cool stuff that i've been showing and there will be much more cool stuff in the future as well so make sure to subscribe and i'll see you real soon goodbye [Music] so [Music] you

Channel: DesignCourse

Views: 38,952

Rating: 4.9660058 out of 5

Keywords: threejs, threejs particles, threejs particle tutorial, particles, webgl particles, gary simon, designcourse, threejs tutorial

Id: dLYMzNmILQA

Length: 32min 21sec (1941 seconds)

Published: Tue Apr 13 2021