Getting Started with THREE.JS in 2021!

oh my god today is so exciting because we're going to embark on learning 3js this right here is going to be a very first little project look at that [Music] what is up everybody gary simon here today like i mentioned we're going to really start taking a deep dive into 3js and that's starting today now not every single video going forward will be about 3gs but a lot of them will be and it's always something i really wanted to learn and so just recently i started to learning 3js uh primarily through a new course and i told bruno who is the course creator that i would give him a plug here um and this is his site for the course i definitely recommend taking it i believe it's like it's something like 30 hours or something like that i don't know maybe i'm wrong i but it is quite lengthy and extremely in-depth so definitely check out uh this if you're really interested in you know learning every single detail essentially about 3js um i'm also going to okay so you might be wondering what is 3js well 3js.org is the main site and there are a lot of examples here um if you've ever heard of awards awww ards.com many of the the sites that win awards are using 3js not all of them but but many of them along with gsap and which is the green stock animation platform and just to show you i mean this is amazing this is a site that's been mismade with 3 j s i mean just take a look at this now this is a user interface that people can use and this is all made possible with 3js here's another one medal of honor i mean this one is pretty nuts as well now sometimes they have loading uh icons if there's a really asset you know there's tons of assets for it to download but it can also be very quick depending on you know what it is that you need to do um a lot of particle effects that you can that you can integrate and really my goal uh with 3js in this channel is to teach people how to use 3ds primarily for like landing pages and web design and not not like games because you can create actual games with this um so definitely check out his site and definitely look forward i'm going to be creating a 3js playlist and we're going to be creating some really cool stuff starting with this relatively simple example today so let's get started now wait one second you're about to watch me tackle some advanced front-end development stuff but if you're not very great with front-end development then you should definitely check out the front-end developer career path at scrimba.com they've 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 righty let's get started oh i forgot by the way let me turn off that or get rid of that taskbar all right um so right here we're at github um literally six minutes ago i created this public repository where you can get started with just a um a quick setup really and this setup is i basically i stole it from bruno simon actually i asked for permission first on discord um and it's just gonna help you get up and running with a webkit i and 3js and just a quick boilerplate code because a lot of it is very boiling boilie boiler platy-ish if that's a it's that's definitely not a word um and so i'm going to show you how to to use this real quick if you've never cloned a repo um you just want to come here this is in the youtube description and we're going to come over here and code http s take that version copy this right here real quick i'm using visual studio code and we're going to go to real quickly view the terminal all right i'm going to go to cd code to get in my uh code folder that's where i still store all of my projects and we're just going to type git clone we're going to right click here it's going to copy that url or paste it rather and we're going to give a custom name for this so i'm just going to call this 3js dc hyphen 1. our 3j is hyphen dc hyphen 1 as in like you know 3g is 3js d9 cores like the first 3gs video so hit enter and it's very quick as you can see so we're going to uh cd into that folder 3js dc one and then we run npm i for install of course you're gonna have to have the node js installed along with the node package manager um you can google it if you don't know what that is because then you'll be able to run these commands then finally when you want to start it up npm run dev when we do this it's going to start a server right here it's going to load this up and there we go we have a taurus a ring that's floating and stuff now the cool thing about this starter is that it gets a lot of the code like i said it's very boiling boilerplate-ish code uh out of the way um to make it responsive like this you know you have to write you know a decent amount of javascript to get it working so a lot of this stuff is set it and forget it but we will quickly uh look at some of the code um real quick so let's go ahead and we're going to open up a folder the one that we just created and here it is select folder all right so we have four different folders here the node modules of course you don't ever want to mess with that don't worry about it we have the source right here and we have static right here as well now the source is where we're going to be working in um let's take a look at the index.html as you can see it's very simple um all we have is just a canvas of class webgl so there's two different ways to get the canvas on there with 3js you can actually get the canvas element and add it through javascript or you can have it right here as well in html we're going to use this way because it gives us more control and flexibility for when and if we want to add more html in here so let's take a look at the style.css right here not much happening so we're getting rid of the margin and padding um font family poppins i didn't even import the font i should not have included that in the starter pack that was an accident and then webgl we have it by default fixed here we're gonna be changing that later um this is the canvas element and so that's all that is and then here is the bread and butter all right so first we're importing the css up here through javascript um we're importing three right there so we're gonna access it through caps lock three um importing orbit controls as you can see it's dimmed out because we're not using it just yet i'm gonna show you um it's pretty cool though um and then this right here this is a debug.gui that's actually right up here where it says close controls and open controls it's real tiny you might not be able to see it but we're going to be using that which is going to make our life a lot easier um so coming on down here of course we're instantiating with uh the constant gui or gui to um give us ourselves you know the ability to create these this uh debug panel we're not using it yet as you can see it's dimmed out we have the canvas element so we just use vanilla javascript to get this canvas element right here canvas.webgl is the class as we can see in index.html so that gives us access to that and then our let's move these things around a little bit and then we have our scene all right so you always when it comes to 3js and absolute basics you have to have several different things you have to have your scene all right so we've created a scene here this is one of those things kind of like set it and forget it for the most part especially for beginner we have objects all right we have materials we have meshes now the way these three things work together objects are basically your geometry the physical you know shape of something your materials right here are the the clothing if you will so if you want to give an analogy an object is your body the materials are like your skin so to speak um and then your mesh this brings that ties both of them together so when we create a new mesh we use new three new3.mesh we first pass it in in the first parameter the geometry and then the second parameter the material that will go on to that geometry and then we finally add that to the scene so you can think of it as a four-step process in order to actually get something onto your canvas first you create the geometry that's your object you create the skin for it your material and then you combine them together as a mesh and then you add it to the scene that's all it is all right next up we have lighting um so there's a lot of different oh by the way i should mention this when it comes to objects in geometry there's a lot of different types of built-in geometry that you can choose from when it comes to 3js you can create cubes rectangles spheres there's a lot of them and they're all available in the really well set up documentation for 3js there's a lot of different types of materials as well same thing with lights this is a point light but you have access to many other types of lights as well coming down here a lot of this is the boilerplate stuff so the sizes uh object right here we're storing the width of the window inner width and height of the window inner height when the browser is resized we have to notify that to 3js so that it knows how you know wide the uh the canvas element should be so that's basically what's happening here you really don't have to to to worry about this part at all this is the boilerplate stuff set it and forget it um we also need a camera and a renderer so when it's going back to all the things that you need like i said you have to have the scene set up you have to have your objects you have to have your camera and of course as with lighting uh materials and and objects you have a lot of different not a lot but you have several different cameras that you can choose from this is the perspective camera that gives you kind of like a real world perspective of what things look like but then you also have a another type of orthographic camera which kind of gives you the isometric perspective in your scene we're going to be doing that in the future and then of course these all have different parameters in which you can experiment with again i'm not going to go too much into detail about the absolute basics here we could set the camera position as you can see in xyz see and add your camera then you also have to have a renderer and again this is one of those things it's kind of set it and forget it so the renderer takes in um the canvas right here and then at the bottom we have uh the animation portion so right here is basically what it when it concerns to be able to animate and uh request animation frame this is has nothing to do with i 3js but this is just vanilla javascript and basically depending on your frame rate it's basically running this tick function over and over extremely fast so as you can see we have this sphere i don't know why i call it a sphere it's not a sphere anymore but it it we're setting the rotation on the y-axis to half of the elapsed time and thus we get in animating like this on the y-axis so enough talking i we're going to get rid of this and we're going to kind of just start from scratch uh at least in respect to adding um an object here so let's go ahead up here and we're going to go to our uh objects we're gonna go ahead and just get rid of this and of course when we do that it is going to break definitely so if we get control shift i and we refresh this wait what's happening here oh did i run my correct uh let's see here terminal view terminal yeah i'm not even running mpm wait what is happening here npm run dev there must have been an issue or something because i thought i was running that but it's not going to load because now geometry is not defined all right so we want we're let's just work with a sphere here and a sphere uh it's baked in is one of the the the um primitives that you can use that uh 3js will provide you with so under objects we're just going to put a const of sphere geometry you can name this whatever you want and we're going to say new 3 sphere g or buffer geometry all right and it takes in a few different properties and this would be a good a good point here to get into the habit of looking at the three js documentation so if there's a sphere buffer geometry and you have no clue what it is type it in google you'll find it quickly and it's going to give you all the information that you're going to need to know so for under the constructor we have the radius we have the width segments the height segments that's what we're specifying first all right so um this is going to control the size and the number of segments is basically you see how some of these have like these points and these different faces the more you increase those right here the more like an actual circle it's going to look like now of course the more that you have the slower it will end up being for performance but because we're only going to be dealing with this project with just one sphere it doesn't really matter all that much all right and of course you could play with these and by the way this is that dat gui debug panel we're going to be able to create some of our own and control exactly as i as we want all right so we're going to put 0.5 and then also 64 by 64 for the different segments now i called this sphere geometry really we can just call it geometry because we already have it set up down here and when we save we'll see that if i come back over here rather we have to refresh it whenever there's air now we have our sphere here sitting in the middle all right so now let's go ahead and focus on the actual material so there are a lot of different type of materials like this is a mesh basic material we can set the color as you can see by material.color like this is red um we can go zero zero ff00 here make it green not that exciting um we're going to use what's called the mesh standard material and this is a really powerful type of material that really allows you to convey uh the real world as much as possible if that makes sense it has a lot of options that we can use so when we use this i in fact this would be a great time once again to get in the habit of looking at the documentation all right so pbr physically based rendering and this is what the mesh standard material gives us look at all these different properties that it has quite a bit and one of the great ways to be able to experiment with what these properties do is by using the dat.gui little debug control panel and this will give you a lot of options and you'll kind of be able to see exactly what all these things do so if i increase this roughness what does that do all right so it will change it a a very low roughness will make it really glossy in a sense and right here you don't see any of those shines so it's it's the opposite it's like matte black m-a-t-t-e metalness what does that do all right so the further you increase this it just makes it look like it could be more like metal or darker and these can really play together to give you some interesting looks so to speak here's flat shading wireframe look how cool that is very awesome so there's so much more that you can play with so for us let's take this mesh standard material and by the way these properties can be defined right here or we can go ahead and define them outside of it by referencing the constant so material dot metalness equals we're going to put 0.7 shift alt down to replicate that and roughness we'll put at point two or so all right so the color we can of course give this uh a color i'm gonna choose uh something that's darker right here that's two nine two nine two nine and now we can't even see it we can only see like this little um light that's bouncing off the light that we created the point light so at this point we're going to kind of change focus real quick because one of the cool things that we can do if we want to see this we want to change the background color the way i'm going to choose to do it and there's obviously we can do it within 3js but i kind of just wanted to do it within the browser is we can make the background of 3js transparent and then we can see whatever we want based on the website background all right so what we can do is in where we do that is in the renderer so where is the renderer right here we put it in the options we put alpha true we save and now we can see our black ball all right so let's change the background too so we'll do that of course in the css so anything that we do here is going to show up uh on in the background behind the canvas element all right so let's just do a background and what color i didn't use a color i used uh a gray so it's an rgb value of 24 24 24 and it's just slightly lighter than this i kind of like the look of that all right so now that we have that let's go back to our script here and the next thing that we'll worry about is we want to give this if you want there's a lot of different ways that you can shape a your your geometry your object um and without actually having to do it by hand through actual by creating actual vertices like in a 3d program and that's through that's done through the material so the material um especially with mesh standard material it has what's called normal maps all right so let's go to google real quick and i can show you what a normal map is or what it looks like so a normal map looks like this all right it's just kind of this weird purplish blue pinkish and it basically it's it's and you may have heard of a bump map um and bump maps are gray scale but it's the same thing except normal maps provide you with more detail not you it provides you know whatever it and by the way normal maps aren't just specific to 3js this is a 3d terminology and concept but what it means is basically if we apply this it's just like a picture like a png file if we apply this on and then specify as a normal map onto our object and our object is just a sphere you know completely flat surface depending on how it's structured it will make it look 3d or make those areas adjust in such a way that it makes it look no longer just a circle it could look like brick it could look like this i what do you call that why am i coming up with a blank uh it just makes it look like whatever texture i you know is presented here like this looks like stone so this could be a really great way to create like a planet um and so where i found i found a uh a pattern like a golf ball pattern texture so we're going to but it was only grayscale so we're going to take that pattern and we're going to convert it from the grayscale to a normal map that looks like this all right so what i've done real quickly we're going to open right click here in static and we're going to reveal in file explorer and we're going to go in there and we're going to create a textures folder and i'm going to paste in a file now i'm going to try to remember to link this directly in the youtube description so you can follow along and do the same thing we're just going to call this height and if i double click it this is what it looks like all right it's just a repeated little circular gradient balls in the amount of middle so what we can do we need to convert this to an actual height map or normal map rather and so to do that there's a normal map generator that i found normal map generator and we click on this and we can go ahead and choose this and this will allow us real quickly let me copy and get the right url there we go i'm going to go up here we're going to choose height there we go and so there's a number of options here that we can use to to blur it if we want i'm going to choose to blur it a little bit and you can also adjust the strength and all that good stuff i think right here is going to be good and then we can just choose uh you can choose the name by default it's going to be normal map we're going to choose download and i'm going to show it in my folder all right and then what we'll do is copy that and then we'll go back here i'll make sure that it's called normal map and this is our normal map right here so what we'll do is coming back to our materials right here we're going to specify that normal map but first before we do that we're going to use what's called a texture loader all right so there's a lot of different type of loaders in 3js and there's a loader for textures and you want to use these texture loaders especially when you have um projects that have a lot of different assets because then you'll be able to create like a little loading thing and then like a loading graphic like a lot of those 3.js sites and examples have and then it'll be able to load properly so what we're going to do up here i'll just call it loading uh is put in um and we're creating we're gonna instantiate and create a constant for a texture loader so texture loader equals new three texture load er all right so now what we can do is reference that file that we've added in our static textures normal map so we can get rid of this one by the way all right so now what we can do is say const normal texture equals i texture loader dot load and then we put in the path to it so it's going to be in textures forward slash normal map dot png all right so now of course we have to reference that under our materials so we're going to say material dot normal map equals normal texture all right let me make sure i have that all well and good all right so let's save this and see what ends up happening all right interesting so we have it's kind of hard to see what's happening right i mean we have this white light and there's something cool happening but we can't really tell what so at this point this is going to be a great um justification for us for using dat.gui which is going to allow us to start playing around with the different properties so we can try to create something that looks cool if you don't use something like that with those easy to use you know graphic user interface controls like the sliders and stuff try you have to then just rely on typing in values and going back and forth it's a crap way so what we want to do is we want to be able to use dat.gui to start positioning things all right so before we do that let's add another light so we have a point light here but let's add another one um that's we're going to give it color essentially so for that let's go ahead and create basically the same thing right here so we're just going to copy and paste that const point light two and this one's going to be a red light ff000 all right four zeros there we go and then we're going to give it a an intensity of like two um the position you can set the position by the way by doing you know position dot x dot y dot z or you can do it all in one so let's just uh select all three of those control forward slash to uncomment i mean to comment rather we're gonna do point light 2 dot position dot set and now we can set all three of them in the parameters so for the parameters i'm just gonna just leave these by default at zero for now um actually let's let's put them at actually let's just do um one one and one these are x y and z and then let's also put point light two dot intensity equals let's just leave this at one and then we want to scene add the point light to all right let's see what happens here if anything noticeable okay so now we have something here now if we want to start moving these around these lights and positioning them like i said we can go back and adjust the xyz of these or we can use dat.gui which makes it a million times better for setting up your scene not just for light positions but object positions rotations and a lot of other stuff so let's do that so we've already created our consonant of of gui or gui if you want to call it um we're going to just underneath point light 2 i reference our gui now one thing we want to do first well you know we're not going to do that first we're going to do this after in a second i'm thinking ahead let's just go ahead and add we're going to reference gui dot add and we want to reference uh the the the prop not the property but um our point light 2 because we want to be able to control that red light we just added so we simply put point light to dot position and then we put in in string format in the second parameter is it going to be position x y or z so for now let's just put y all right so when we do this at this point we can see we have y and it says one now if we increase this like left click and drag this up and down you can see we're moving it up and down on the y axis very cool but we have some other abilities here so for instance if we want to put a minimum value like maybe negative 3 on the y-axis is you know we don't want to go further than that we can do that we have to have a max so maybe we don't want to go higher than three um and then we also have a step so we could put 0.01 so that means when you increment it it will only it'll increment it by you know 0.1 or like 1 so if we save this now we're also going to see that it's going to turn into an actual slider this it was a text field before because we didn't specify a minimum and a maximum when you specify the min and max you get the slider option right here so it's handy oops let's go back there it's handy because we can see the value right to the right right here and then once we find a value that we really like we can put it in uh and hard code it into right here so we also in order to position this we're only doing on one axis so far we want to add the other two so shift alt down two times to replicate it put x and z here you know what let's also do intensity so we'll replicate that again so we're just gonna put point like right there and then just put intensity right here all right so let's put on the x negative 6 because i found when i was experimenting with that negative 6 i i wanted more for for the x-axis to be able to go that far um maybe we can put six here too and then uh for intensity believe you don't have a negative intensity so it starts at 0 and then we'll say all the way up to 10 or so all right so now we're going to hit save and look at all this stuff that we have to work with now so now we can move it over here we can push it over here so now we have full control awesome awesome so there's another way to to visualize and help you work with lights and they're helpers they're light helpers and so there's different helpers based on the type of light that you have and there is a point light helper so what we'll do is i create that real quickly so let's go ahead and put that right here so const point light helper equals new three point light helper and we're going to pass in our point light 2 and we're also going to specify one here i forget what that second parameter is for i believe it's for the size of the point light we'll experiment with that and then all we have to do is scene add our point light helper so we save it we're going to be able to see where that thing is so let's refresh so right here it's like kind of out there far kind of close to us because on the z-axis it's on one if we push it back down there now we can kind of see now we have like a reference point so let's adjust this to like 0.3 for instance and see what happens i believe it does just change the scale hmm where are you dude let's try two this would be one of those good yeah it does adjust it it basically has to do with the scale so let's just leave that at one and now we can start moving this thing around and figuring out kind of like where we like like it the most intensity there's not a huge difference on intensity but kind of increase it further yeah let's just go all the way to 10. and now you can just kind of position it where you kind of like it let me i'm going to leave it right there so all these values now we can plug in so i when we're setting the position of point light 2 up here this is the x y and z make sure you put you know not y than x so it's negative one point eight six on the first on the second it is on the y it's one and then on z it's negative 1.65 now when we save this oh and the intensity we agreed is just going to be 10. so when we save this now it's there by default awesome so this looks really cool it's already starting to come to life already now it would be cool for an interesting contrast to have another light down here that's perhaps like blue or something so let's do that well at this point we already have a lot of our code written um for the the lighting and the point light helper let's get rid of this so what we can do is just copy from here all the way down we can just do like uh light one or light two rather this will be light three all right so now we have a bunch of things to change point light 3 and for this one we're going to i i'm not going to change the color i'm going to we're going to use that.gui to experiment with the color which is really awesome as well um so for a point light 2 let's just leave it here or point light 3 rather let's change all these where we need to change them oops right there make sure you update everything that's necessary and now we have a kind of like a problem look at all these these are all like they're like grouped together in a weird sort of way that makes it difficult to understand we have folders that we can use with dat.gui so let's make use of that because that makes a lot more sense so for the folder what we'll do is let me find my point in my reference code here we create i a folder called const actually let's do it right above right here const um we'll say light one equals gui dot add folder and we'll call this light one all right so now instead of referencing gui we reference light 1 right here now that first light is going to be in its own little folder group that we can now extend now let's do the same thing real quick over here this is going to be light too oops there we go so now we have both of our lights here that we can control let's also give ourselves the ability to change the color so for our color we're going to real quickly it's a little bit more setup work in order to control colors but we'll get there fairly simple to understand so we have to first create a a property that we can access the color property inside or an object rather we create an object so that we can access the property the color property inside of it light to color we'll say and equals object with a property of color and then we'll just put 0x ff1234 that's red then we say light2.add color this time it's not add it's going to be add color and we're going to pass in it works the same way so we pass in the object light to color and the property name color then we have to add on change we specify point light three because this is uh what we're in reference to oh wait light two light one okay i was confused myself because as i said light uh two point light 3 is what we're changing right here is the color pointlet 3 dot color dot set it's going to be light to color dot color alright so basically this means um in the in the the dot gui when we change it with the little color palette it's going to notify 3js to change this color so that's how you change colors with the debug option for dot gui so now uh oh we got a problem light to color is not defined all right so where which line was that right there i didn't i have the correct uh camel case or whatever so let's go ahead and first move this over we're going to try to get over here so y will come down x will push it over and then the color just go to blue look at that look how freaking awesome that is i love it maybe something like that look how cool that looks the intensity i really like that all right so that's how you can i use the the debugger to really help set up everything um not just lights of course but all the various properties that you have access to so this looks really cool i like it um let's go ahead now and kind of switch things up we don't need our helpers anymore so what we can do is we can take this and comment those out save it they should go away all right you could even hide this if you wanted to and you can also have this collapse by the fault um if you wanted to as well uh oh what happened we lost something i think i i commented um something out that i shouldn't have let me go back yeah because i i commented what did i uncomment or comment this is point light helper two oh i know why i never saved those uh adjustments okay so i was right in and commenting those out let me do this i'm going to on my other screen i have the values i already wanted to use so i'm just going to specify those right here so position.set for my light 3 let's see if that works yeah we have to also i also didn't change the color there we go it's kind of over here a little bit too much i kind of wanted to push it over so if i just take my x there we go so 2.13 on the x-axis is going to give me let's see here 2.13 there we go all right that's looking pretty cool in my opinion at this point so now we can add some interactivity right so this is kind of cool with how it looks and stuff but what if you know we wanted to make it move a little bit based on mouse position so you can do all that um so what we'll do is we're gonna come down and specify i think just right around here under the animate section what we'll do first is we're going to add an event listener and we're going to uh make it list make it notify a function so we're going to say document.add event listener on mouse move we're going to say on a document mouse move so that's going to be a function that we have to create so for that function first before we create that we have to create a few variables so we're going to do let mouse x equals zero let mouse y equals zero as well and let's do this a couple more times target x is going to be 0 and target y will be 0 as well and then also we're going to create a constant of window half x equals window dot inner width and divide that by 2 and then do the same thing on the y axis so inner height so we'll take on document mouse move past an event come on stop hitting the wrong key what are you doing all right and so inside of here we're going to reference our mousex variable that we defined above mousex equals event dot client x and that's in relation to the position of the point the mouse pointer or the cursor when you're moving it around on the x-axis all right is going to be y my y minus window half x all right and we're going to do do the same thing on the y axis all right so if you if you think about it what's happening here is we're getting the window the inner width of the actual window the viewport and we're dividing it by two all right so if it's 800 it's going to be 400 so based on the client x position of the mouse when you're moving it it's going to subtract that amount from there and the reason you're doing is just to make it a more interesting um smoother scroll in terms of how it's going to affect the sphere that we we move around all right so and we're going to listen for mouse move so we're going to document add event listener mouse move and we're going to call function that we're going to create called undocument mouse most mouse move all right so we have to create a few uh variables first so we're going to let mouse x jesus what am i doing equals zero same thing with y right because we need the x and y position of the mouse movement when you're moving it over let target x equal zero and let target y equals zero as well and then we're going to create const um called window x equals window.enter width which is going to get the width of you know the viewport window and we're going to divide that by two and we're going to do the same thing with the the y as well inner height all right now we can create our function on document mouse move and we pass in an event here and so we say mouse x which was currently set at zero above equals event dot client x and if we console log that we start moving our mouse around you'll start seeing a bunch of numbers go up and down uh on the y or the the horizontal axis at least um and then we're going to subtract that from window our window x rather all right do the same thing on y alright just like that so replace those three x's with three y's so what this is doing is i you know we if the the width of the window is 600 pixels it's going to be 800 for window x and then we take the position of the mouse on the x and y axis and we subtract that uh we subtract window x and window-wise respectively now why are we having this uh it just affects um how much or it's going to affect the movement of the the object the sphere that we're going to use these values for if that makes any sense probably doesn't at this point but that's okay and all we're going to do is now that we have our mouse x we say our target x which is currently set at 0 up top and target y as well equals mouse x times and then point zero zero one we'll do the same thing on y and guess what let's see here make sure this actually works oh it's not going to work yet not going to work just yet we're going to come down here now we have sphere rotation y which is why it's currently spinning we're going to leave that there because if somebody's i want movement all the time so the the mouse isn't over it or whatever or they're your finger or whatever i still want movement so we're going to say sphere dot rotation dot x or we'll start with y again plus equals this time it's going to add to itself 0.5 times target x minus sphere dot rotation dot y let's save it and it should work in relation to our mouse there it goes look at that so it's off the screen it keeps on going but then we interrupt it now let's add that for the other two axes x this is going to be y and this is going to be x so let's save well let's not do that let's just do this one real quick z it's going to be y here and x here um we're going to play around with these values though so now you can see it's really adjusting things quite a bit let's change this to point zero five and point zero five here and also flip this on the negative so now it's kind of really adjusting things differently all right cool now what else can we do alright so we can also make this i respond to the scroll position and in order to do that we're first going to get back into our index.html and we're going to add a little bit of markup here so we're going to have a container class and it's going to be h1 feel fell feel the sphere after it we're going to have an empty section so that we can create some scroll so in our style that css we're just going to create a few rule sets so for our webgl instead of position fixed because we want it to go out of view we're going to say position absolute all right and then we're going to come down here and we're going to say h uh no our container and we're going to say height 100 viewport height display grid and place items center that's going to center the text vertically and horizontally can't see it because it's black and in the back and not very big so let's take our h1 we're going to say font size 8 rem units text transform is going to be upper case color is going to be white let's save it oh that's big the reason that's big is because i'm a 150 zoom there we go all right that's really cool um let's take our section as well and give it a height of a hundred viewport height now we can scroll down by the way let's get rid of these controls real quick so we can just go back to script they're kind of annoying me um let's see here yeah so if i take all this right here comment that out all this comment that out we should be good to go and of course we're not i broke something light 2 is not defined um let's see here up right here comma that's that was just for the lighting portion or the coloring rather refresh all right there we go now wouldn't it be cool if we could um um let's see here if we can make it so that this is sort of transparent in some way what we can actually do is on the webgl class on the canvas element we can place a mix blend mode we'll say exclusion look at that isn't that cool i thought it was interesting all right so now we have this ability to kind of scroll down oh let's also get rid of this horizontal scroll bar and we can do that with if i can find it um so in order for this to work we can't just play it on place it on the html and the body we have to do body alone overflow x hidden if we did it on both the html body then you can't scroll down anymore it kind of disables it for some reason so now here we go we don't have that anymore all right so how about like if we scroll this down maybe something happens to the size of the sphere or something like that all right so let's go ahead and go back to our script.js all right basically right in our animate section and we want i to call another element let's come right down here so we're going to say window dot add event listener just like we did before and this time not mouse move but it's going to be on scroll and we're going to call update sphere all right so we're going to say const update sphere equals event and inside of here we'll just say sphere dot position dot y so i guess we'll just move it up instead of scaling you could scale as well if you wanted window dot scroll y times something really small because if you leave it by default which is scroll y without multiplying it by a smaller number it'll it'll just shoot out really fast like instantly so let's save that now we kind of have a little bit of a parallax effect occurring here let's also uh update the position um in fact that's what i meant to do down here it was not supposed to be position it's both a rotation it's supposed to be position there we go so now we're adjusting it we're making it look like it's growing but that's only because we have a position on the z-axis [Music] and look at that look how cool that is awesome awesome stuff all right i hope you enjoyed that i i know it's a it's a lot it's a big crash course essentially um but definitely consider taking bruno's course i'm at 3js journey um and it is elaborate i'm not even done with it myself i'm only halfway through um so yeah anyhow keep an eye out for a lot more 3js content make sure to subscribe give me a comment and i'll see you soon goodbye [Music] you

Channel: DesignCourse

Views: 228,079

Rating: 4.9473381 out of 5

Keywords: threejs, three.js, threejs tutorial, three.js tutorial, threejs 2021, three.js 2021, threejs course, three.js course, gary simon, designcourse, web design, web development, getting started threejs

Id: pUgWfqWZWmM

Length: 57min 3sec (3423 seconds)

Published: Tue Mar 16 2021