Introduction to Three.js (with Sarah Drasner) — Learn With Jason

hello everyone and welcome to another episode of learn with a Jason today on the show we have Sarah Dresner one of my personal heroes thanks so much for coming on to the show thanks for having me and we're already off to the races with the sound effects so Sarah for those of us who aren't familiar with your work do you want to give us a little bit of your kind of your background what you're doing now sure I am I manage a team of amazing amazing developers over there and they're all fantastic and you should check them out and follow them I can give a list of them and if is a really really cool place which I you know love and want it to work for because I love their product if you haven't checked it out it's really easy to deploy a sites and forums and things I also am a staff writer at CSS tricks and I'm a view core team member I'm not doing any of those things on this chat I'm doing showing how to work with three J's which isn't really part of my job but I just really love playing with regis and it's something that I do on the weekends because I think it's really fun and they have some talks about it and did you do the this animation here is this 3j yes it's not it's SVG oh cool okay so that's like a whole other thing yeah so today we were gonna play with with 3j s which a little while back we had Paul Henschel on the show who is the author of like react spraying and react three fibre and he gave us a really like a really quick overview of setting up like three J s we did a cube and then we animated it with some like really fun stuff so this is gonna be great because we can we can kind of go into the vanilla part of this because we're not gonna use react at all today right yeah so I did watch that one it was super great and like if you haven't seen it it's stuff Oh awesome you should definitely check it out they basically they make like a rocket ship they import a model which is this rocket ship and then it like is able to animate and you import a model there's like a lot that you can do and also they're using some abstractions but that react library that he was showing we're not gonna use a library today I mean we are gonna use a library in the sense that we're using three.js but we're really getting a little bit closer to the bare metal we're gonna work with vanilla JavaScript and just three J's what I like about doing it that way is that it courts over to any framework it you can literally like if you go to my site Sarah dot dev saying yeah there's like a three J's animation if you hover on that I make things that breaks apart too so you can see like these roses break apart and that's not made with any kind of like abstraction layer right like that's not made with a view something or other even though the site is made in you it's just made with vanilla JavaScript so you can I can porn it over to react later or like I said try spelt or whatever I can use this with that so I'm kind of showing you some basic parts and what I really like about the kind of learning the basics is that a lot of people think that they can't make stuff like this because they're not a designer or something like that and really what we're showing today is that you can do things just with the JavaScript that you know just by manipulating some JavaScript if you know for loops if you know recursion if you know like that like so many things are open to you just by knowing this yeah and I'm really excited to get into that so what do you think is the best way to start we we had talked about a couple different strategies and I think you had ideas yeah let's see since we're just using HTML CSS and JavaScript let's just use code pen and that way we can share it afterwards yeah I quite like it I'll do I'll create a live version or a collab version of this and it's like a nothing thing at the moment so here I'll send this to you in the chat and let me know if when you see that okay and let me pull that up okay yeah so I'm I'm in are you just just in case let me see if I you can see Jason you know yep it's showing up all right great um and maybe it might be best for you to go into the change view and do the side one so that you can see things yeah like the other one yeah oh the other one this one yeah okay and then I can show you how to like open and claps for used to so the first thing that we're gonna do here is I'm just gonna make I'm gonna make one HTML element and it has Emmet in it so I can do canvas id canvas and then open that up and then I'm just gonna close that HTML down so if you want to like pull one on your dad code and close it perfect and then in the CSS I'm only gonna do one thing in there which is to do body margin I can't type when people are watching me for something I think like I don't know if you ever watch The Simpsons but it's like oh I can close this one up too okay yeah we're good we're mostly just gonna hang out in the Jay s tab the next thing that we're gonna do is we're going to open up the gear for j/s and I'm gonna add some scripts so I'm gonna add we have your fossil-free poster that's Babel or Babel I'm gonna add in 3 J s and then I'm also gonna add in this trackball controls so we can pan around the scene I think in your other one you use those too cool great and the the last thing I'm gonna do is I'm gonna go into settings at the top I don't think know when where did you find these did you just go to like the 3 J s site and grab actually I typed in that search box three James oh cool so if you just type in like trackball yeah I guess you've since you already have it it's already it's not showing up but yeah but you can write anything react yeah cool that's handy and then you don't have it for some reason I think maybe it's because my pen but what I'm gonna do is I'm gonna give myself a run tab at the top and what it does is it allows it if you are in code pen and you hit click settings and you go to the behavior tab it will say it will have a bunch of boxes and at the bottom it's like enable the run tab the reason why I have a run tab is because sometimes I want to code a bunch of things and then see it play out and lately it's particularly useful when you're doing things like for loops and stuff like that in case you you know accidentally create infinitely so many times like I think my most chatted thing to Chris player is like how do I turn off the Jaso so I have the run tab so that I'm only having it displayed cool okay and so now to just kind of to recap here we've set up just a canvas element and then we set up the body to have full width and we don't need to do that with the canvas like the canvas itself will take up full width yeah we're gonna tell it to oh okay cool and so then we load it in our third-party libraries three j/s and a trackball control and we can't see it on my on my computer but you turned off the auto execution of of JavaScript perfect so then I think we're ready to start right yeah so I'm gonna move if you see my eye darting around I'm gonna move oh so we would need add okay so the thing that I'm gonna do there's a little bit of I'm gonna have you like we talked a little bit earlier there's a lot of setup for not a lot but like a little bit of setup for AJ asks and so part of what we're gonna do here is set up the renderer and the scene and things and I'll kind of talk through some of those things feel free to ask me questions then I'll kind of hand pass the baton to Jason and we'll talk through things a little bit more it's just that there's some muscle memory attached to the first so so it might be more productive if we just do it that way yeah that sounds great so I'll just keep my hands up here for now and you can't join me if you want to if you're like I got it I know what I render I guess I can I can do the awkward moose while you while you type right well I think that's it so jazz moose and then there's awkward moose all right so the first thing that we're gonna do is we're going to give ourselves a renderer a camera we're gonna do some controls and we're gonna you know get all of those things kind of ready to go and then I'm gonna do I kind of always do this in my in my 3GS pens I've got window dot inner width and then and then height and I use I use a window dot inner width and height a lot first for those of us who haven't seen that this is just you're literally saying like okay so if this is our window which that's how code pen works we're saying we want the width of it to be this like inner width is from the the right to the left of this and the height is top to bottom yeah and the reason why we're declaring these renders and cameras and controls and scenes outside in kind of global scope is because we're gonna use them in a few different functions that we're gonna create below um in kind of like a three but self-contained 3js there's many ways of like importing and exporting those kind of things in an application but we're not gonna go through all of that stuff today for now we're just gonna have it kind of hang out here and then make some function so I'm gonna make an initializing function so I'm gonna say a just like function init and we're going to also call the init function above and I'm gonna keep dropping these below so I'll just keep like working on these kind of initializing things but I will also comment the different sections so here's the render mm-hmm and what we're gonna do is we're going to say like render and we don't have to declare it again because we've already declared it above so I don't want to say like constant under or anything here is new three and three is always capitalized and that's gonna be and this is available because we added that that third-party script in the settings that's right and so like if you're using it in a react project you import star as three capitalized from three underscore or not capitalized so so what 3 is is it is an abstraction on top of WebGL so what we're doing here is we're giving ourselves a renderer to add to WebGL and then three is gonna give us some nice abstractions to work with it so even though three will seem a little bare metal compared to some other things like the other you know screencast this is actually like pretty pretty obstructed and they just kind of exposed these pieces for us which is pretty nice so the first thing that we're gonna do is we're gonna get in the canvas we're gonna say documents dot get element by ID and right yeah um and then we're gonna say canvas and that's because we said canvas here if we called it dancing tango monkey pants we would have to call it dancing why didn't we call it dancing tango monkey pants really big oversight my part so we're also going to say anti-alias true that will make it look a little bit nicer if it also impacts performance so if you need if you don't care too much about the way that it looks and you care more about performance that can also be set to false I'm gonna say renderer got set clear color and then basically I can add whatever hex goes after this line so this is going to be what the what we want that canvas to render in terms of like what color we want it to be so I'm basically saying I wanted to be a dark grey right like zero so here's our would be black one one one one is like lighter grey like I don't know that many of the hex colors but that's that's one okay and the zero X that is because we're doing it as like something computer science I assume yeah it's like a way of it's like a way of telling them that we're gonna use a hex color there's a more detail that I could give there but then we'll leave that as some research for the for the interested yeah I have a whole article called nerd sky to guide to color on the web and that you know if you're like nerdy colors and it's like it's like I think it was like 18 pages long in Google Docs before I ported it to CSS tricks and Wow no you can write smaller [Laughter] which is true I don't but not somehow I just get rambley and you know color is really cool so I'm gonna set the size of the renderer to be the width and I you know it helps to spell it correctly to be the width and the height I'm like low and now it's and now it's done it I'm gonna run it and then you should see it's all black Oh yours is already running okay well you'll already saw it was like I did not so okay great so now we have a renderer now we have a canvas to put things on and it's a dark grey the next thing that we're gonna set up is the camera and you can like it's pretty well named right like the renderer is what's rendering to the you know documents and the camera is gonna be like what we see and the camera has some things in it so I'm gonna put it on first and then I'll let's walk you through what those are new three perspective camera there's a bunch of different cameras I pretty much always used perspective camera but there's good docks for it if you want to check out more about which kinds of cameras and stuff but yeah I feel like there's at some point in the future there will be a like let's dive deep into this and talk about very specific angles of things like all else you know help I'm gonna ask for so many recommendations from you of people in this community to have on the show next because there's I feel like this rabbit hole goes so deep it's a really fun rabbit hole to and you know you can just make such cool stuff with it so with the camera but basically what the camera is offering is the field of view so the amount that you're seeing then it's like the aspect ratio which you pretty much always want to be the width and height so window not enter it and went over window enter height then it's near and far so how far you see this way and how far you see that way so if you want to adjust how much people can see those are things that you can kind of play with so later on down the line I'm also going to set the camera position back a little bit I always do okay and so to kind of so I'm I'm I struggle with this a little bit as like an abstract thing so what we're saying is basically like if we if we picture that what we're drawing is going to be like a box right what we're designing right now is like if the box is here we need a camera and I'm gonna get that we can like zoom the camera in and out or like pan it around or like make the angle wider narrower that's right position basically everything that we're creating will allow you to change its position which is really fun because that means you can animate the cameras position you can make the camera go around ya or you can like lights cap positions - you can like move lights around usually people are moving the objects but you can play around with a lot more stuff so this and like get I want you to get used to like X Y so it's X Y & Z right so because we have those dimensions so the camera position Z is like controlling whether it's backwards or forwards in space gotcha cool so then we're gonna add those controls those trackpad controls that we had earlier so we're gonna say controls equals new and you can see we're like substantiating these things all the same way right we're gonna go check it's always like this Pascal paste thing so it if it looks like it's a lot to remember at first just keep in mind that it's usually just like new three dot and then something that's Pascal paste so we're gonna say we're gonna pass the camera into the controls and we're going to say controls dot add event listener change and then we're gonna say render and that's going to give us an error because we haven't done render yet so I'm going to comment this out or just now until we build the render and render is gonna be a function yes render will be exact and then we've got this scene and then this is a really important part so we're creating a scene in which to put everything like basically you're setting up like what if you think about what you need to like make a dramatic action and movies we have all of those things we have like basically like this the renderer we have like the camera we're gonna have like the scene that everything's laid out in and then we've got the things that are attached so everything kind of gets attached to the things before it oh yeah yeah look lorry and the chat was just making a joke that she says the next time she's doing one of these she's gonna say she's directing a movie which feels pretty it feels pretty accurate with what we're doing so far oh and now lights so I'm gonna add light one I always call it like late one late too late three you don't have to call them that you can call them dancing tango monkey but like bears basically you pretty much always want an ambient light because that's like the light that's on in your bedroom right and I'm gonna just add like a kind of normal one two three four five ffff saying and then maybe I'll give it like a little bit of softness by adding point five which means that I'm gonna do it like half lights basically but I could just pass the color in and that would be fine too that's an optional parameter so and then light - I'll show you how the optional parameter works so like new three dot directional light there's also point light there's like a bunch of different lights you can use and I'm gonna do again like another zero X ffffff and I'm just gonna pass that right like no optional like nothing else okay and then and the the optional parameter you said that was for intensity yeah okay so like a severe some passive okay so light - I'm gonna do that position thing again because that one is the one that's like very very directional like the ambient light doesn't really matter where it is it's like all over the place and then the light - is like very very directional that position we have XY and Z I'm just gonna set it to one one one for now but Jason can play with it later and move the light around as he sees fit so I'm gonna just like set the stage for him to do some playing and then we got to add it to the scene right so I got a scene add light one and scene add lay - cool then we're gonna add a listener for Windows resize so I'll do like and we're gonna say window add event listener [Music] resize event will call a on window resize function that we haven't made yet and we're gonna say false I'm not gonna comment it out for now because we're gonna make that like right now okay so so let's do make function on window resize and this is so that if the user resizes their window it doesn't like get all wonky because an otherwise it will like every all of the shapes will go like wow which is a technical term so we want the aspect ratio to be the same like we did before where its width / height camera dot update projection matrix projection matrix so that's just like calling a function that hurts on the method that allows us to do that and then we're gonna say render our dot set size and we're gonna say width and height again it's usually like X&Y for a lot of these things and then optional parameter of Z for a lot of stuff so if you remember XYZ that's kind of easy to remember and then we get go controls dot can't the controls and understand how to handle resize as long as you tell them to so we're going to do that then we're gonna go back up top to where that an it function is and we're gonna add a render function which we're gonna create actually let's make the render function first that's probably there so let's go down back on top of the on window resize and we're gonna do function render we're gonna say render dot render and we're gonna render the scene and the camera so you can start to see why we put those kind of in more global scope so that we can access them through awful of these different functions we're also gonna have to set up an animation because every time we we create something we're gonna animate it because we have to kind of create this render loop so the rent the animate is going to use requestanimationframe request animation frame and then we're gonna pass in animate because it's a recursive function Patrol's update so that controls are also going to update so now that we have the renderer we can uncomment up here okay cool ok looking good now the next thing we're gonna do is we're gonna call after the init at the top we're almost done doing this stuff right we're gonna call animate before we call render ok all right so so far we actually now we actually have a scene I know you don't see anything yet but we're about to put something into the scene so this is all the setup I will put together a gist for everybody of like all of this set up stuff and kind of boilerplate e stuff so you don't have to like rewrite it every time but I think it's a good to like see people walk through it so that you can learn a bit about why we're doing all of those things so that you know if you did want to change the field of you or you do want to change the position of the camera that that is all like stuff that's possible for you you know so a few people have noticed my my Dresner shirt I couldn't not wear it for this episode my husband made these Dresner shirts and I hate him no no I'm just it makes me so happy I love the way that you do tease each other on Twitter it's like my favorite like my favorite sitcom [Laughter] okay also did this thing where she liked her perfmatters she like have stickers printed of my face which is like really weird looking because it doesn't even really look like me it's like I'm like this kids like everywhere all over the house I love them is that you that has everything selected or is is somebody few it looks like okay so whoever is a who manually typed out that URL to join us if you could deselect everything so it's yeah thank you very much please be nice everybody it's a lot of work to undo it if you silly hackers get in here and mess with us okay so we have all the boilerplate that we need to do a thing right I mean so at this point we have kind of we've kind of like laid things out but we're not doing anything yet so I would need to create some kind of shape or something or are we are we have we entered the part of the program where I start flailing around um I'm gonna give you a shape to start playing around with and then we're gonna make other things happen okay so in we added the add shapes and again like you don't have to structure your code like this I'm just keeping it like kind of I keep it to like what it's doing in smaller functions to kind of see where I'm at and stuff so okay great so I'm gonna say let so the first thing that we have to do is create some geometry and this is definitely a part where you can flail around so three dot box geometry and it takes three parameters act you know X Y it's basically the width the height and depth well we've got I'm just gonna say ten ten ten to kick us off and then the other thing that we're gonna do is we're gonna need a material now and we it helps to spell it right material new three dot and I could start with mesh normal actually I'll start with mesh normal material and other things okay and can you talk a little bit out what that means yeah so the material is what the box is kind of covered by so we created a box it's ten ten ten and then we're gonna cover it with material and the material can be like any number of things so I can there's some like things that you can get out of the box they all kind of respond to light differently they all have different parameters that do different reflectivity you can even apply textures like you might have seen things covered in bricks and stuff like that we're not going to get too into all of those things but that's super available to you also you can do things like create a shader and attach it to the material so if you want to get it like crazy light Spike's coming out everywhere fog appearing all of that machiners are really pretty they're pretty tough I did they are really fun for anybody who's interested in that you can go and look at the the stream that I did with Paul Henschel because we got into fog a little bit so that would be a way to kind of see how all of that worked yeah well I I think one thing that you should note in that is that that's very abstracted and if you wanted to get into like real shader shader there's a single shaders that actually tells you what shaders are and you because what what he showed in there was super great because you could spin it up super fast but if you want to make something like super like way detailed and like really you know mess around with them fail you but the book of shaders really walks through what every single piece is and it's there's a lot but like also has stuff that you can manipulate in there and so you can like play around with the stuff that's in the shaders as well so it's not just the thing they're like examples that you yeah I would say like with Paul's thing if you want to spend something up super fast and react that's so awesome and it's he does such a great job with that if you want to create something that you have like a really strong idea like I want to make zigzags in shaders that then create this and this this that's probably where you gotcha okay cool very cool yeah so and that's I think something interesting is like there's a there's such a big discussion around this in general but the idea of like abstractions right like abstractions let you go fast but you have to accept people's opinions when you want to get custom you have to go below the abstraction and the more you know about what happens underneath your abstraction is the easier it is to do that stuff quickly yeah and so if you want to do something like super particular then yeah there's also like these playing cards that I'll hook up the link later that I got like the card shows the shader and then the back of the card shows like what the shader is oh that's that's super cool and they're really beautiful they're really awesome I don't know if you know Shirley I just met Shirley woo and she was excellent we are talking about doing some generative data visualization heart on the show cool yeah she does three genius stuff too so you could definitely do stuff with her as well she's amazing at everything alright yeah I'll take that Wow Shirley so and she has a stream too so she's she's good at this kind of like life coding stuff so I'm just doing a random color for now and we can that's another thing that Jason is gonna play with I'm gonna show him how to make general generative colors and we're gonna do mash is new three but you I mean you can kind of see the pattern here right new 3-dot mish and then we're gonna quit that geometry and material inside them the mesh so basically the mesh allows us to like surface the materials and like the geometry in the material aren't necessarily connected until the mesh brings them together right so so yeah so if we think about it like the geometry when you create the geometry the the the shape then exists but it's kind of like transparent it's a it's like an abstract thing and then the material is a surface but it's not it's not a thing yet so you actually have to like combine them together to get an actual shape with the material on it kind of thing totally and yeah so and then that mesh can be animated to so you can take that mesh then and like move it around okay yeah so then we can say scene dyad and then we pass in the mesh and then we add it to the scene and this should give us no I have this code open thing that allows me to look into the window what are you doing computer why why are you like this it doesn't work didn't you like it says W dot addeventlistener did we do a W dot even listen here somewhere yeah at the bottom let's see cuz we got one on the window resize but that looks like window exists I spell something wrong would it be the controls maybe like the controls doubt add eventlistener I don't think so comes most oh wait did I not add it to that oh it's commented out that well actually I just commented out to see if it would refresh but yeah it didn't it change anything let me see if I can do like maybe it's something with though it's not liking the window here in dirt under wet still doesn't like that one okay 3.4 controls is not a constructor Oh interesting is it singular maybe Oh uh single let's try it maybe I remember weird what do I even write that right I think it's not singular but we can try it me see if controls is there there's a suggestion that do you need oh yeah there are a few is so when you import the trackball controls does that get added to the three object or is it since it was a separate library yeah it does okay because we're adding it basically to the camera so the it are we getting three - trackball controls is that the package yeah let me see if I brought that in in the the usage example it shows you get three but then trackball controls is a separate import that's outside but yeah I brought that in already let me make sure it's the right link can I try something yeah yeah go ahead the setup Docs or wait something just worked but then it stopped working I saw a box for like a hot second okay so now it's wait now it's showing up oh that just work okay so now if you spin it around and stuff you can see the box I don't know why I don't know how we fixed that that's kind of a non-deterministic err you just have to look at it long enough oh it was the lowercase B in trackball okay so again helps to spell things correct who fix that B for us yeah that was that was helpful so okay cool so alright but now we've we do have a we've got a thing and it's doing stuff and I'm I am able to like scroll up and down and it's zooming in and out which is very cool that that just like works and that's what this trackball controls does right oh whoa whoa look at that I didn't even know that was gonna happen that's cool so what we can do now has changed the material so let's try to do that and pass in like I'll have you do that part so like you go to the add shapes add shapes appear to mesh Lambert material instead of normal material and don't capitalize the be Lambert material like like that yeah that should change it there okay so now to have like a little bit of more fun let's lick you see how there's like a directional light here so we mentioned that you can change the position of the light and make it move around so let's go down to where the light is and on line 48 you see light position set go ahead and play with those numbers so like x and y and x and y so it's like x and y and y and yes and then is there kind of a range like you go 0 to 100 on this do you go yeah so your range will be that field of view that we looked at in the camera so it's 1 to 1,000 1 to 1000 so if I set it like at a thousand oh it's like all the way to the right so we can see that like just that right hand side has a thing so if I set it to like 200 it's still gonna be like that right because it's not any person face like it's maybe a little less more strong but like you probably want to like set it around to different spots like that see now it's a little yeah yeah so now you can try the Z okay and so then if I pull it like further out in front and maybe like a little bit here then we get some it's a little more dynamic looking okay so that's very cool yeah so that's one thing that we can cut you can kind of play with and like make different all the time another thing that we're gonna do is I'm gonna make actually do you know how to make random helper functions maybe you can do that part or I can walk you through it random helper like just building a random number yeah sure I can I can probably figure that out okay so at the bottom of the file we're gonna make a little section called helpers just like an object yeah we're gonna do a function okay so function with two parameters and it's gonna be min and Max okay and then in that you know kind of are actually instead of calling it helpers probably like I usually use like totes Rando but that's kind of long oh I see I understand you were you meant like this yeah yeah and oh let's let's I mean let's uh let's like live up to the legend here so we're gonna return a math dot random function random and then we want x in parens max minus min and then plus min and what this this is a really handy one this is like basically will return a number between a random number between though the minimum number and the maximum number and so that is something that we're going to use up top so like maybe we want to make a bunch of boxes or do do you want to try other shapes real quick before we move on - sure I mean I'm I'm kind of down for either what do you think Jack should we do shapes or multiply random multiple randomly generated boxes shapes let's do shapes shapes okay so if we go to the three J's Docs three Jas Docs and then scroll down a little bit on the side and you can go past the animation stuff esta and there we go gianna trees yeah no no geometries got it yes so we can go through any one of these and do cones or cylinders or dodecahedron let's do a dodecahedron because I heard that word once when I was in math and then I never did it again yeah so now you can like if you look at the drop-down you can actually change it around and stuff you can see which parameters you have to work with and like the radius and the detail whoa look at that that's wild yeah okay so cool scroll down in the on the in that window it will give you the code so you've got a well anyway the know to be on my tree passes in that float in the detail right like you you saw the radius yeah so we can you can maybe even like pick one from above and all of the shapes that they have they have these kind of little box like ways to play with them okay I'm or if you if you wanted to make a new shape now you know how I do that right you can go to the docs you can go to this section and you can see like what kind of parameters you have to work with and you copy them into that constructor and then you can make different shapes wow this is yeah that makes things so like it's way less intimidating when you can just start like pulling on knobs right like that's the yeah that makes that makes this way more approachable because it's like oh okay I just want this to look cool and I can click around to each of these until I find one it kind of looks like I would I want twist these knobs until one of them looks the way that I want it to look yeah and then you still have to like remember which ones go into which parameters and stuff and then I mean basically like when you go to this the site I showed you earlier this era Deb one I you know first Jason asked me to show how to break things apart that's a little bit more complicated we're not going to do that in this but you know those that shape I created by reading the shape so you can you can actually start to understand how that was made right first of all I took a shape I spun up a bunch of the different shapes I you know added them to a group which was added to him like each one of them has a mesh right and then I have like a shader that shades each of the sides but that shape itself was something that I made by taking a shape and adjusting the knobs until I found like this like configuration that kind of looks like a rose yeah so I kind of spun those up with a for loop and like toss them around with a random function with some like cosines and things in the background instead of setting a clear color there's a way of setting a transparency for a canvas and I added a image to the back of it so like that background is like an image I took the shapes I spun them using their meshes I had it a shader to all of the sides so you can start to like understand how that was built yeah you kind of you just build up in steps so yeah I mean that's so let's uh let's let's play with this let's add a new thing I'm gonna add let's add a I guess I'll just do like a geo - yeah and it was radius so it was ten and in the detail I think it's like one and then I never write code like this this is well this is like a very introdu the lists ayelet so I'm like my brain doesn't want to do it I mean and then what's another material maybe I can go in here and look and play with another material so maybe what's what's one that is not super complicated but maybe looks a little differ um Thun Thun oh cool okay yeah this works so I have the tune material and that gives me a color a map that's fascinating I assume I don't have that brick so I'd have to yeah you I mean you can always go to the for all of these they have like a little edit button you can go into another window and see how it was made but like and like steal their bricks okay open-source bricks cool okay so then I'm gonna use the mesh toon material and mesh toon material and I'll just set a color of let's use Rebecca purple oh so we would need to add code okay are those all optional go down to the docks great question defaults defaults defaults okay good yeah yeah everything is optional so I think we can just throw in the just just making sure okay so then I'm gonna do a mesh - and I need to make this material - and that will be a new 3d mesh with geo - and material - and then we'll add it okay one other thing that you might want to do is move it in a position because it's gonna be on top of the other one so it's it will be in like the same spot okay well yeah you can call the other one out did I break this oh yeah because you did three oh it's gotta be upper jeez there we go cool okay okay so now you can we not only did we make a dodecahedron but we gave it like a crazy weird shooter and yeah I've I've made my very own lumpy ball okay so now let's make like a city yes so let's do you mind if we get rid of your alum people or my lumpy ball so great now let's there's a reason why I separated the geometry material and the mesh and that reason is because I wanted to set up a grid and I don't want them to be attached so let's create a two dimensional array so we're gonna make a four loop that's like I and the for loop that's like J that's nested inside of it and then I'll just use a consistent number for each two as the length so we can kind of store that I don't remember how to write for loops okay I equals 0 and then then I have to set what it does and so it's gonna commend nope no I [Music] and then we increment that's right its initial condition and then like action that's right i wow I can't believe it's been a really long time since I've written a for loop and then wanted me to do a nested for loop yes I'll do another one of those but with J instead okay and don't use I for the j1 or you will cause an infinite loop which I did like like sometimes feel like warnings I have a work show so people are like I would never do that unlike okay so we're setting up oh and then that's why we wrote the totes Rando function yeah we are gonna use that in just a second but first let's put the mesh and the scene inside inside here okay is that great so now we're making a bunch of them okay and now we're gonna change the mesh position so I'm gonna I'm gonna kick it off with giving you a distance so we're gonna make the distance between them distance is like I don't know let's just start with 30 for now and then inside here we're good I'm gonna have you do the mesh dot position okay we're gonna mesh dot position dot X equals the distance we're gonna do the distance times the eye and then we're gonna do it again or the Y actually let's do Z so that we can do it this way because these depth right we know we could do it this way but then it's like flat against the wall you kind of want to do Z all right whoa whoa Wow [Laughter] okay that's amazing all right that was so much easier than I thought it was gonna be so now what we can do is we can like change things up like the height and the in the material color and stuff too right so like let's go take the let's leave the num in the distance outside and then bring the material tree and material inside as well okay so I'm taking these out here and we're going to set these up yeah cool great perfect now yeah that's great okay so now maybe we want boxes of different sizes yeah yes okay so let's do that would be which one Jason well we so this is the width height and depth of our box so X Y Z so we would want to play with this right yes oh sorry you were asking me for a specific dimension and I was like I know how things work okay all right so I want to do then totes Rando and we want to pick a size between we had what 10 so let's say between like 5 and 15 maybe 15 yeah means I'm gonna go higher if we're gonna make a city oh yeah we do want to make a city huh so let's what do you think like 25 and 75 sure 25 and 75 okay so things are happening I noticed that they are vertically centered that's true we we can work on that in a second but before we do that let's do some other things I'm gonna how about we make many many of them and how about we also tighten them up that sound good yeah so let's do maybe 20 is that sure we'll start there so that it's not let's also give it ourselves an offset oh that's too many right in the middle of them oh no that's good that's good okay like maybe we for here we want to make an offset and do like we kind of want to give ourselves some space so let's see we're in the middle of how big is it do not have like 200 or something and then we'll add it to the X of here oh yeah so we're just gonna add that too oh not there sorry I'm not being clear um we go down here oh oh I get you says I am so we're gonna offset it from us but we can also have the camera change or something like that as well right yeah all right did I do something no no I think you're fine I just did it too far away okay I think maybe we do need to move the camera cuz it's like we're like zoomed all the way into the side yeah let's move this thing first we're still kind of weirdly placed maybe for the Z we go up way way higher I can't remember if it's what we do we want to I think we want to subtract it yeah well it goes weird sometimes um yeah so let's let's try subtracted maybe even a little bit more like 400 yeah that's so that's a little too much 300 that looks yeah that looks a little closer and if because once we that gets weird because now it's on like a the rotation basis is is interesting yeah so maybe we put ourselves back to the offset and to go a little bit high so the way we're going to go high is with the camera instead of awesome keeping doing offsets and stuff so let's go down to the camera and we've got the camera positions the at 100 maybe you want to do a camera position Y negative something okay negative 100 yeah no this is what I was talking about okay I think it's the cameras position that is the opposite I always get screwed up like well I know I know that one of them it's the opposite of what I think it is so yeah that's maybe a little high so let's go to that looks cool and then maybe like the the X we could do like a negative 50 cuz then there will move everything to the left that was not what I wanted at all I think maybe we should get rid of one of the offset I think rather than offsetting both we should just offset there that looks okay that looks City ish yeah great so I'm gonna I'm reloading mine because mine is out of date I think okay so now let's make the colors randomized to house that's them I'm into it so we have so here's our colors I made random hex colors but I find those a little bit hard to work with so maybe we can use HSL instead what do you think I yeah I've only passingly familiar with HSL but the more I use it the more I like it okay great HSL is really so the first thing we have to do because it doesn't really like HSL so we have to define it as a new color kind of thing okay so basically say three oh that new everything else can you please stop we can add pass in i'm gonna do i'm first write it in just fact I'm writing in him back to as a template literal but like let's say it's 110% or like 100 percent ah 50% so what I like about HSL is that it's very forgiving what you have is a hue on a circle right it's like a 360 dimension and then saturation which goes from 0% to 100% and then lightness which goes from 0% to 100% and that's super easy to like think about right because this is pretty bright we're at saturation like this color is like very very saturated right yeah maybe we want to for a city we want to tone down the saturation a little bit right because we might want it to be like a little bit less like cities aren't usually bright pink so maybe we go down to like 50 or something like that at first but the other thing we can do is HSL is really not only is it very easy to work with because you're going on that circle of your cue rotation but also it's very forgiving because a circle is a circle you can't ever fail so if you go outside of the bounds of the circle it totally doesn't matter because it's still gonna be a number so in here we can actually use a template literal if you're not familiar with template literals they kind of look like this and we can pass in that totes Rando and I'll let Jason do whatever he wants and for for hue is it is it on a 360 grid or a or a 360 okay so we can probably want to pick like some colors so we probably set like maybe 30 point range that would put them pretty close yeah sure okay so let's I don't know where the wheel is so I'm gonna go at random and just say 180 to 210 okay so this doesn't want to do what now we got to add - the color oh oh wait so I broke it that's my okay so we've we've created a color and now the color is is actually valid I had accidentally deleted the leading parentheses it looked like I might have and now we want to add that color and we can do we just do it straight up like so yeah yeah okay and for everybody watching we are gonna make this available so there's no need to you don't have to copy paste it or anything now it'll all be shared shortly after this goes live so this is amazing like we've done some really cool stuff here with our our random thing so let's um we just had okay so like I what I do is I use this color picker I don't know basically I'm gonna open it up with a color picker okay I'm gonna go into me let me leave run okay cool if I go into my browser and go get one of the colors you know that you can't see what I'm doing we're all watching when bated breath and can whoever's in the code pen please deselect so what the color picker allows me to do is pick a color randomly from my screen which is really useful for things like this tonight mess it up alright okay so I'm gonna go with the color picker and pick one of the colors that's the one of the furthest blocks away just like a kind of grayed out tone and then I'm gonna apply it here where did I go you see where it's on line 42 where it's render or clear color and I did set the one one one one one one yes so I'm gonna put one of those colors here okay goes back in space and now we can also like now that we started to have a city let's just really do it up I'm gonna put the num2 like 100 and it's gonna choke a little bit and I apologize in advance but then if we look if we say we can have gigantic so maybe what we want to do is go like and you can see that field of view like right like you can see where it disappears yeah so you we set the camera correctly which we can totally do it well you can control where that end of space is so maybe what we want to do is go back in space or whatever on the on the camera position so I'm going to do camera position do camera position Z is negative that's too far so maybe I do someone's in front of me well you can kind of see like you can play around until you're at the point of view of the scene you're getting that you want so maybe I'll set it back oh man my browser is just choking on that yeah this is quite a lot of stuff I might I might bump it back just cuz it's getting pretty weird yeah yeah that's totally fine I'm gonna take it back to like 30 okay that's a little more that's a little more manageable it's not Oh No yeah we can we can handle that but it's still like that's a that's a hefty City yeah so if you place yourself appropriately in the scene and you can also make the field of view kind of like tighter if you wanted to mmm then you know you can make a city scene and like let's say you're setting this up appropriately and you're making sure that there's not like you can set it up so that as you pan through you're like dumping the blocks behind you and adding blocks in front of you and that's all kind of like just JavaScript like me those aren't like crazy design things those are just literally understanding how to work with JavaScript so you could also do recursive functions that build trees and things you can also you know stuff like this and there's all sorts of like shaders and you know we could use shaders to make them look like real city buildings and things like that yes and so there was a request that I think we should do let's bring lumpy ball back and make it our Sun oh yeah let's make a lumpy ball city and we'll make it yellow which is what green and blue so does it need to be uppercase no okay and then I need to position it which I will do by looking at its position so mesh dot position dot Y we want it to be a positive number all take it above the city yes okay so let's maybe make it like a hundred and fifty no no not for this one this one needs negative I think I got confused cuz the camera needs the other one ah where ya at lumpy ball you know lumpy ball is turning into a what's going on with that what's the oh it's because you got mesh position oh oh yeah that would explain so much lumpy ball okay so it doesn't even but I did get my oh I'm just bad at the hex values I think this is why I prefer HSL thank you there we go and now we have a lumpy ball son all right [Laughter] okay you can add things to it like if you wanted to make like somebody said lumpy ball emoji you could do like a lumpy ball and do like flat plain circles and stuff add them to a group add that to a mesh that would be amazing yeah so this is I mean this is super fun like I and I feel like this is starting to feel like if I was trying to build a game like I would imagine that this would be super hard like oh look at all this work to go in and create all these different shapes and you know make my city layout but you're literally just saying you make a box and then throw this on and then we could randomize the colors we can randomize the heights and then if we wanted to we could randomize I assume the the pattern so like sometimes they would be brick and sometimes they would be concrete and we can just load those in like we saw in the docs right so aside from like the shaders and those kind of like there's the built in materials and the shaders you can also do things like right now we're using math dot random which isn't it's very random but there's also other kinds of noise calculations like there's simplex noise and there's Perlin noise there's like whole histories of how people invented them but you don't need to know all that there are JavaScript libraries where you can literally use the library pass in a value and it will create the Perlin noise for you so if you didn't want to do math dot random and you wanted it to like undulate a little bit more a little bit more you can go look up JavaScript noise libraries and they can you can have a little bit more fine and control over them that's so cool that's uh that's amazing so I now I want to go do that I want to build like a spiral City all you really need is JavaScript and a little bit of randomness yeah so that I mean that's that's really amazing and and so I was just looking at this physical material here in this this like brick pattern and this is all it would take is is adding one of these bricks so there are about like 13 minutes left in the normal time that we would take is that long enough if we wanted to add one one map I actually have two no that's totally fine okay in that case we will call this a stopping point out there that show like I will take a circle for instance apply a spherical like texture to it that's a city put the camera in the middle and then pan around so you're like looking around the city and there's some of those examples in the three j/s examples as well but I have if you go to like if you go back to my code pan yes to pen all pens and then there's this one that's all white yeah go to the one that's all wait here no sorry not that one yeah that playing with sound in 3GS and if you click on the start button [Music] yeah [Music] so like the SAP like if you listen to it with the sound basically what I'm doing is I'm taking this shape that has a shader and I'm breaking it apart in combination with the audio and this pen is very very heavily commented how to do it so you can learn how to connect audio to things in three j/s you can basically just take that pen and like fork it or whatever and connect audio to yeah wow that is super cool and so like this is like I'm just very impressed by this the audio visualization is actually something that I have been thinking about and I want to do an episode where we where we play with it so this could be a great starting point like maybe we'll just come in reverse engineer what you've done I'll send the gist with like but just the boilerplate for setting up an initial thing for everybody I'll give that you the gist to you perfect alright well I know you've got a jump so where should people go to learn more about you or to check like what should they do next play with three days my I have a lot of code pins that are all sorts of random stuff I'm on twitter at Sarah IDO Sarah underscore IDO but yeah if you want to make and break code pins I have lots of collections two of other people's work so like tons of stuff that I think is really interesting and it's really fun so there's like one called fun times that's like a lot of canva see stuff and like weird stuff that is definitely good reverse engineer fodder for people who like to play around with things cool thank you so much for having me on yeah thank you so much for coming on I feel like this was a super informative thing I learned a ton I feel way less intimidated by three Jas and now I want to just go play with this all day to everybody who's watching please go check out sarah's just vast body of work on CSS tricks on code pen all over the place she does incredible stuff for those of you who are interested stay tuned we're gonna raid and make sure you go check out learn with Jayson dev for upcoming shows we are gonna we're gonna stream all week so we've got UX workflows and prototyping tomorrow with Marisa more be we're gonna do some stuff with with Zeit now on on Wednesday we've got some WordPress with Gatsby on Thursday and Friday we're gonna do Expo and react native it's gonna be a whole lot of fun this week it's September in twitch which means if you want to subscribe it's half-price and that's all that I got so Sara thank you again so much and to everybody watching yeah we'll see you tomorrow [Music] you

Channel: Learn With Jason

Views: 16,662

Keywords: twitch, three.js, javascript, threejs, 3d, material, mesh, geometry, codepen, live coding

Id: mXcawneCRHY

Length: 81min 10sec (4870 seconds)

Published: Tue Sep 17 2019