Animation and 3D in react-three-fiber (with Paul Henschel) — Learn With Jason

hello everyone and welcome to another episode of learn with Jason today on the show I have Paul Henschel Paul do you want to tell people kind of who you are and and what you do yeah yeah I guess not much to tell I'm a front-end developer I'm in Germany in Switzerland I travel between the two and I'm mostly interested like reading front-end design animation this sort of thing I'm the author of reacted spring model founder and it's yet P fiber and I think I'm going to teach you like aspects of both cool yeah I am I have not used either so we are going to okay yeah so I'm super excited about this because animation is something that I've been doing front-end forever and all of the animation that I've done has been like small CSS transitions or little looping animations almost exclusively with with CSS or sometimes using javascript like back in the jquery days so this is all this is all very new to me i'm super excited about it well cool so yeah I am really really pumped to have you on the show I think this is gonna be a good kick off for us because we're kind of launching into a week of animation here we have you on the show and then next week we've got Sarah Dresner and she's gonna teach us just three Jas which I'm I'm super excited about too so yeah I I'm I'm stoked to just like get right into this I'm chomping at the bit to write some code how how should I start what what's a good starting point okay given that you are going to talk about three anyway I make a quick if you like very small like update what's 3e j SS okay and I guess afterwards we can go go about it try checking out some code okay so the basic idea is that the browser has two technology called WebGL it's running on the it's extremely fast and that's a guy he's called I think Ricardo cabeza caballo I don't know and he's made a abstraction of this it's called 3j s it's like one of the biggest libraries on the internet I mean in India JavaScript space the problem with WebGL is it's super complicated you do everything on your own you are on your own like can really in the rain you can't like just reuse stuff that argument so that's why we have three J's okay this one is huge it's used by like Nike Apple and so on that's like really big names going with this one and these are it's amazing this is just a whole collection of examples of examples that you can I mean all right I was not ready for that this is really cool though it's like yeah it's just like really cool things that you know stuff that it's hard to believe that this is done in JavaScript right yeah I guess exactly that's that's actually also my point for for Charlie to make this more like mainstream yeah TJ wes is already why easier than WebGL but the problem of course it's it's fully imperative as you know imperative means you're like adding stuff to it removing stuff and if something changes you like traversing the same graph so if you have ever seen three J's code to looks like threatening intimidating really have mm-hmm so it's the same problem we face with the Dom basically that's why we have reactant some people I've actually tried bringing this to react but I figured these solutions were like I'm maintained on like half-baked or not enough like 3j s has like hundreds of classes so they they're pumping out new stuff and if your maintainer of this it's a nightmare because they have not taught you to chase so the idea with this reconciler was it's like totally generic it's used like heuristics and stuff so it works for three ejs version 1 & 3 J s Marshall like doesn't matter so I don't even need to care if they release something new I don't care what just work then we'll see we basically at the entrance and of course now you can use react you can form components you can use redux you can animate factor for ecosystems like open and that makes it very easy as you can see what you have in front of you are like components you can mount on here you see some little condition show playing so and this is this is really exciting because it's you know we've got it looks like one custom hook here but in about 75 lines of code you've built out this whole animation which is that I mean that makes this feel more approachable right it's I mean this one looks like it's using physics it's another lip called Kellum but in three.js you can like integrate all this stuff myself so for this use cannon we're not going to go that deep I mean you will talk about 3GS enough in in the scheduled episode so today just do some simple stuff but let's do some demos yeah let's do it so I have I would be very happy if you set up all you have for you that's cool yeah I've just got an empty folder install you use yarn or yeah I use yarn is should I just set up like a empty react project I typically use Gatsby yeah okay so I'll do and you're going to the first one is so three give me just one second to get the this empty project setup so we get to be starter hello world which just sets up like the the basic commands it's kind of like a new create react app and so that'll give us just the ability to run the site in the browser so that we will have like a hello world page and then we'll install you said we're going to install three things I'm going to start typing while this is going as I can work it's not yeah that's cool I've never tried to cut speed before so so exactly three then react three fiber react three we're going to animate okay right history yeah for sure yeah I saw that vape Osama that it does work in the background I usually it shows me like one character at a time and I didn't see it so I thought it was not working Oh [Music] to slow with the elevator music he gonna it was already done okay so now I have just this empty react component and this is the only thing that's being rendered right now so everything else is just like this is an empty config file we don't have anything going on so we're pretty much in business to just do whatever we want in here just oh the elevator music this with people can play sound effects as we as we do things and so one of the the sound effects that people play is elevator music while we do note installs because if they but yeah so we we're pretty much in business here we can start doing whatever [Music] whatever you alright justice does come with some kind of default style let's try to stretch out our margins and or canvas first okay yes so you need to import how that's be works but if you have something like oh yeah so I can I can just do yeah we'll just add a style that CSS will do plain CSS today and do you want the look at my adding a canvas or do you want the div to be full screen just everything a hundred percent margin zero so body whatever we have also the canvas element everything like goes full screen for this one okay so I will do like a body HTML canvas route so like route like this and then canvas I think route is ID or is it do you mean was oh yeah so like with with Gatsby I think that would actually be called Gatsby and then the canvas will be there so we'll do with a hundred percent height a hundred percent petting zoo margin:0 padding:0 I just left and then we'll import that style dot CSS okay and then here that's that's right can you see something sure should I should I put something you know the the hello world was fine okay you need to like I haven't seen that's beautiful just need to get some some idea for sure Iko math that is fascinating if you want to send me details on what the what that means for parity purposes cuz that would be fun I just want to make sure I don't get taken down on YouTube okay so we have a page and it is currently up and running hello world and our Gatsby is a hundred percent this div is not we didn't style that so we're gonna put a canvas in here instead but that's that's where we're at mmm all right so let's try it every change that we make takes as long as this no it's it's its library loaded so if I here if I make a change it'll show up in real time okay so I guess the first thing we need to do is you get the canvas component from the react 3/5 this is what is what gives you exactly that's what gives you like the GPU enhanced ok and yeah just just okay know if you can let's try if it shows up okay and so just kind of empty empty but yeah it's empty box we should see you to me dev tools just hope that it's big enough yeah how's our canvas it is full width so we are in three.js now and we can pump 3gs into it 3GS has lots of classes building blocks so we are going to start with them so the first one that we are using this call to mesh they are like j6 elements you don't need to affect stuff they are later yeah so just pump them into the cameras okay so I'm gonna do a mesh okay it's an element you can close it I mean open across so it gets some other children okay all right so a mesh basically means it's an object a mercantile contains purchases purchases like points connected to a surface like a polygon okay three points and you have a triangle so this one now needs geometry if you want you can open 3GS website which you have and better just switch it to documentation for now okay we are going to recreate like the demo that we have here you can see they show you the ropes okay if you search here as system exactly just call mesh and should be down there this one came to be it's it's pair this one the objects so there you see how it's basically works box but for in geometry and material so this is what we are going to do let's let's just try okay so I'm gonna hand geometry and material you know and do I add a basically yuku like this you could still hear exactly and you could say like put some brackets in there and you could say like new 3j s dot I don't know actors but we are not doing this because scanner it would really create geometry on every render pass okay and also we don't want like to memorize that we wants to heck out everything the declaratively okay so remove this thing is geometry thing and give it a name object and just call it box buffer geometry inside of this one inside of here inside of the mesh no you don't need brackets it's it's an object just like open like attack like you like Andrea try to exactly okay and see you all this box buffer geometry mm-hmm okay and buffer and chakra tree is so big in caps okay this one you can close-ups doesn't have any children or metric if it's how do you say some new line so my my image is semester no no problem I'm German okay alright this will do nothing the first thing we need to do is we need to attach it to the upper mesh so you it has some property it's called attach and it gets a string its targets the property geometry so this is just basically the same thing which you have done before you have such a mesh geometry and tennis a new 3d blah blah blah okay this does the same thing and just declarative Lee I get no image with our arguments you can consult in three.js documentation and click on box buffer geometry you need to search for it yes there it is anna has basically I think three properties okay it's language width and height okay so when the white works in three fiber you go back to the course I just do length width and height yeah you know I missed but it's three J's so this with more contracts this is actually like yes it's not a scene object specifically speaking and you need it's like a glance in reality and it needs a constructor okay and inspectors are done with the arcs you just say ours arcs yeah you give records and an array of arguments okay empties one one one one come on one chord okay you can say that and she has a box here we go yeah cool sorts of first primitives if you refresh you get different colors because it randomizes done okay we haven't met material material means like you shade it in okay so this next step we are doing we are going to give it to me to me so if you go back to the course just give it another child it's called mesh basic continued mesh basic material yes you textured to the material property and you know you can say color it's red could be history and now if i refresh it's always red so this basically did the cheapest dumbest thing you can ever do I'm sure this material oops looks like horrible it's I mean it doesn't take anything into account lights or shadows so traumatic crappy so let's try to improve on this or is it I'm seeing in the chat that its args like with a G not a C is that correct yeah it's our what did she say I put arcs so I was just spelling thing wrong really a default right okay thank you thank you memos for that all right so we got the basic thing running right so what what should we do next I guess the logical next step would be to make a component out of this torso you cut this out starting from wish okay and you credit function component with this so now we are all ready why you had three GS okay and I'm just gonna drop it in like this that you're giving is like one with records because we are going to use hoops and stuff oh cool yeah and just return all right so if you save this we have the box all right it means it has mounted which we can unmount it and so on so I guess I will show you how to do some basic events on it like you can interact with this let's do some basic hover okay okay all right so for this we need you state you stay from react got it yeah exactly so we have some insects hover and it's for all false by default okay all right now you can already go to the color or the color red okay they make it conditional if it's not coverage let's say it's gray and if it's coverage I think so should be green if you say that it's great oh wait what other way around all right yeah okay fine now we need to register events on this mesh so you can go directly to the mesh directly to the managed yep and to use pointer events are just regular point advances you know them my five Model T's events afternoon or no they are called on pointer over and out on pointer over oh well I don't know that I've I don't know that I've ever used these in react and so this would I mean I think I haven't been in Safari for this reason I get through and then that's correct on pointer out set it back to false right that's good yep no you have boom so yeah it's the same thing in the SMN dome let's do another one let's make some interaction I like to keep state actors from to invective okay so same thing you have your state actor active force by default and the event is called on click yeah let's see if you we would just do like toggle it basically right or did you is it's okay and now let's make it a bit bigger if it's active sort of mesh property it has a couple of I mean the master object mesh the one that's carrying all this this one yeah this one has a couple of interesting properties such as a position or a test rotation meant it has scale okay let's try it fail yeah if it's actors you need to give you military and it's like XYZ so okay let's say 1 dot 1.5 yeah 1.4 like 4x crazy over each one okay if ya if you want you cannot deform us you can move duh alright so that's exciting okay so if it's active we'll do that and if it's not we just give it one one one yeah okay so that's cool and then if I like mess with this like the oh yeah there's like one squeeze it cool okay so yeah let's try to animate this you're going like yes yeah so let's fetch reacts like we want to have some cool animation not just like statically okay you want monument and what's the the convention for this is it like an import spring or import react spring it's called you spring it soak use spring like this yep this one is going to be special you give it a slash and you say three react spring / 3 okay I I guess have to explain react spring this cross-platform deaths you can say like slash Universal and now you could use it for each and every reference on our moment Hardware react PDF react native does many more but you can teach react spring to animate outside of react so that actually the component renders ones and a time it's completely in its own neck and it's way more performant so that's really using stretch three here you need have another thing that she needs to imports after the early spring this one was going to it's just between it's called a a not-so-small Oh a small one it's a shortcut for animated react native users they know this because you mate react native also if animated octave animated dance I wait no they don't have to animated it's dot view whatever so if you've ever used to react native funerals okay and I was tired of writing animated all the times very short okay so let's figure down could you put a new you spring oak after this you states yeah what and does that return an array or you know let's call props for though it's not an array just I'll just call props it's not it and this is like an argument and this one takes an object the idea is this right now we have states two states you hover connectors and react spring can turn static values and together stats animate by themselves okay so basically what we're doing this copy everything that is inside scale down there copy it you can remove it okay and name it scale yeah comer oh and then showed you the same thing here okay and then do I just swap these out for the like prop style color that you up there where you have yeah you do to this props dots color and props that scale now just put an A in front of everything you're going to animate your honey makes the mesh and the material so like this no yeah exactly and still to save lives no tournaments whoa that was so easy it's I mean it's really fascinating yeah holy crap that was I am this is making me very happy I'm like oh I can do so much stuff because this actually makes sense to me I mean it's the same it's the same principle it basically converts static data yeah into metadata let's do something cool put a console log into this component console over this return which one just over here just like so if you have ever used by create motion you know that this thing will like rerender your react components 60 times a second so this won't it reminder once you can see it now in console.log average yeah I don't know what's I don't either it's like I think we messed it up with the dev tools or something oh here we go it just it like froze on me for some reason oh it's because we did the witness once yeah it it goes completely outside of react it's like super fast super formed that's really cold and you can close it on the dev tools okay and now I showing you something else what we are doing now is react animation this is natural for react for 3js it's actually not natural I mean of course we should use it if you mean it but 3js normally is used for games they have a concept it's got a game loop okay so normally they have new inside the loop timestamp and test start messing around in there so that's let's try this from oh okay the there's a quick question just to clarify how it's only rendering once yeah when so when the component renders instead of having the loop you are taking it out of react and handling that animation and then you just bring back the render at the end of the animation is that right yes I guess so I mean we had Spring has its own requestanimationframe loop okay and it knows like the reference of the notes to the ones to animate and just like mutates to note okay so did you know it skips react basically catalyst if you wanted to do this with react like refreshing the component is super heavy because react needs to reconcile whole thing right and this is not good for performance so this is like almost like old stuff jQuery yeah but they were super fast if you remember so it's too much check this okay cool very cool all right and so the next thing that you wanted to do was game loop and do I get that out of fibre or spring this you get all the fiber XXV the things like this if you scroll down to the canvas scroll down to the go to the canvas yeah exactly so this gives you like a GPU German chemist and actually right now under six frames per second okay you can stop it you can do like only render or when you need to but right now it's in-game you won't and I guess it's fine for now and we have the possibility to hook a functional component into this game so what you need it's called use use random I think use render yeah cyclic so just plastered in there into the ebooks components no this is fine oh okay sorry yes okay we're going through like rotates to box this has no return so just use from oh just like no that's it yeah like this it's a function that's right okay can give it empty parameters but normally it's if you need access if it gives you some internals but we don't need to okay so everything that is in there is executed on every frame so right now we want to mutate our mesh we want to rotate it so you need to have a reference from it so make a just basic react reference on this mesh okay mm-hm and we'll call it and then we add you have matter earth okay that's what's measure currents and I will give access to the actual 3js element which is really useful so let's try rotation okay and just just like the rotation study I don't know why like this it's a dot Y star Y okay and plus equals that class like this knows just plus without without any of this cluster you just a lousy boss okay let's see $0 to zero one okay and run my still interactive if you consume it hover you can make it active Wow so this is a gaming groups we have to - like modes of animation that you can use yeah holy crap this is so cool damn that is really like it's just it's just uh yeah I know look I like this this is also uh it's so like in my head animation is so hard right like there's so many things happening there's so much math involved and so seeing how how straightforward you've made this this is super impressive stuff so I'm so happy to see this working well this is cool yes alright this is amazing what what should we do next I mean you know from now on all doors are open we can make games we can use it for front-end I actually made this because I'm like sick and tired after you don't they're telling us that the dorm is like fast or we'll get far in space I could show so you have like 10 dishes and it's it got them it shows so now you have the possibility to separate a little bit you can use the dome for like layout which is cool and you can do lots of cool stuff with shaders and whatever if you've ever seen this this one website is called aawww arts I don't know yeah yeah the works so how often stuff is like using WebGL there for some reason insect reason it didn't really arrive in a circle I was landing like the JavaScript community that I know for some reason this stuff is really like far from it this guy he's called kids kids yeah the kids yeah he was like he saw something someone made some some crazy demo moving train and selected seeds and she's like how the hell is this this is going to work and we are so screwed in a way that was going you know this would be actually really easy to come off he couldn't believe that so I make some little demo to show him so actually we have everything we need in the browser we just it was just like so far and so foreign from react that's maybe we didn't dare to so that is the idea behind three fiber yeah I don't know I guess you will never find out this guy treats like yeah okay yeah it says he's also the creator of app which is a pretty more like responsive he's a professional sure though so you can you have my Twitter you can conceive yeah let's see o XC a came into my head okay terrible choice for like marketing but yeah I think I I think I remember seeing this it was like I think it should come though yeah here yeah so click the yeah you don't even want to click it it's just it's very very cool stuff and so this is just in the reactor II fiber yeah I'm tricked Springs shoot rickets it's not much cold it's actually really easy if you see the codes on box that's very logical everything is a component the quarter is a component the cabin the seeds everything is there which is composed and you have like hooks and animated land that you animate everything else on and on so as you see it's just little bits of logic and information it's a straightforward so I hope that all these things day they leads to two like there are more people using my stuff and things yeah yeah that's really cool so one thing that I'd love to see just kind of looking at this is could could we put some light on this so that it has like shadows so we can see the different sides as it rotates yeah that's the next one yes let's let's do something else before let's put some controls on it so that we are able to like move to Strong's oh yeah don't you yeah so like if I if I click I can rotate it yeah that would be cool yeah let's do that you have seen didi transmits application which they have some little like truck gets transmitted right that's this form an account yeah it takes a little bit to load but eventually you can like if you click you can rotate all you should be I don't know maybe in Dave if they dissolve happens nothing if you click it turns Jack I'm clicking and dragging and nothing's happening maybe this isn't the page where it was happening that's too bad but it doesn't matter we do something like this okay so it would be cool for some god speed block whatever so just cut out this this game stuff we don't need it because we are the one set okay so do I want to keep use render no I want to get out of it altogether true test and soon we can move the reference okay mm-hmm and we're not using use ref or use render anymore okay so we're we're back to a static box all right so next we need to have some controls in 3GS it's reverse suggest you have a camera I give you one by default it's a perspective camera it's it's like five units from the object this is what what it's looking all to the box right now okay you can change it whatever but then you have four different prototype and called controls controls they steer the camera so we get controls from three itself so you say import import their orbit controls they're like many types of controls strike one and so on let's take orbit orbit orbit like this controls yeah exactly from three slash examples Jason Jason stack modules controls all wheel controls okay and is it a named exporter is it yeah yeah it's it's it's I think that's correct okay and now he needs also to fetch something from three fibers called extend capital e let's call this just call this function extends with an object and slap orbit controllers in there this you do indie indie I mean out there this is not something you want to do like one-on-ones oh I get you okay so I explain looks we're but explain if you go to the section where you have Jessup's dimensions you see these are native elements right side of the box back to geometry but now we have taken some class that looks like foreign to three itself it is it's not included and three GS so to make react three fiber know that this can also be used on JSX you need to extend and now you can actually you could write inside here you could say your orbit controls I can write inside you could imagine sites or the controls written small all written small how do you say it's lower caps but let's make a component out of this created components you call controls okay oops mm-hm and am I gonna use yeah just return the D controls okay and so it's just orbit controls or rituals - case and the first one is lower case first ones lower case and controls yeah like down you can close it okay and to need some arguments if you want you can like consult 3GS to take yoga okay let's look at here and then it was orbit corporal homes and we're going they need the camera into Dom element okay and so this there's no mountains to be going to supply these in three fiber there's another how could caught use three this units to use three mm-hmm it just call us in front of so just execute and you get back some properties you can restructure you get the camera for instance so we just hope you get all the internals which if they change it three renders the component that's the point of the same okay and give it to GL that's that's really the low-level WebGL interface and so the first arguments again you need arcs the first argument is going to be the camera camp like any scenario and now it wants to have the Dom element it's GL double event mm-hmm okay that's fine another thing we need to do is update it on every frame because it's not like wired into 3GS at all it's a completely different that code examples it's actually not part of three J's okay so you need to put a reference runners okay [Music] am i doing it in here or 30 depends in there so you have the reference exactly and now he needs to render it on every frame okay and I am not sure how to do that you did it before it's the same thing I also just used right hey you know okay and then I'm gonna pull use render came in from fiber right or did it come in from you know and that's it I'm going to call into this reference and call update on it in this fuse render its it's a function on this fence okay so then I'm going to do orbit ref that current update doesn't if everything's units so this function has caught up every frame it's all my idea this stuff it's a comes from PJs so basically if you consult on the documentation exactly you need to put in so if you consult us things will make sense okay it's like their rules I'm sorry for this it's just like how it works so if you safe the actual work oh my god so our bits works like this you have the top and the bottom and you cannot over like what we're trying to do is that just working out yeah of course oh man yeah that is it's it's cool because this looks so hard so seeing how easy it's been made is is this is really encouraging stuff I mean yes can be hurt oh yeah I can imagine that if you were to tell me what these these things were I'd be super long teaching you like two kids so we need to auto-rotate it so you just can give it a proper ultra taste and we'll start to move myself like auto-rotate here normal yeah you could but just just right just into these orbit controls orbit controls auto rotate - case oh it's just it's okay I got you I got you no let's clamp it's because you can still like go up and down and I have seen some Gatsby books where they have like some moving stuff that's why I wanted to show you this transmitted they had to stack track and you can only like rotates in 1x so we need to clamp the controls and it's called max polar angle and min okay I know I just said like yeah it's an it's an angle so you say mouth dot pi and PI speak and divide it out um all my three should be fine and you do the same with the min honoring and announce cramped and so just the same thing yeah segments and no you can only you know oh yeah I can't roll it anymore I can just spin it so cool okay but if I did something like I don't know like this yeah I know you have oh I think I did that backwards maybe it's this one it's 3 and 2 mm yeah and then I can rotate it a little bit but not all through me oh that's super cool yeah okay okay yes just like many properties something you can figure it out that's like enable damping so if you pullets each were like like overshoot a little bit it will not look so aesthetically but just stuffed doesn't metric for now okay this let's go to lightning if you want yeah okay alright i guess i'd need to really okay okay so no problem get the we get the the voluntary house tour to knowing between I didn't want to go here okay [Applause] lightning is come to son the first thing you need to know is to change the material again the material we have right now knows it's not good so change the material to mesh physicality just straight up change it straight up okay if you if you save it it will turn black okay so it's because this one needs light to function okay and the first the easiest light of ambient light you can just add it to the scene ambient light and I just add it to the scene as like atom like that like that okay so if you hover it you know it's not a strong light they have something like intensity you can use this but for now it's fine let's just leave it like this okay and now let's put some spotlight units this one is interesting like so so you just you just go like spot fires - case okay and let's put it a little bit or just save it just fanciful worms alright so that's a little wild it looks like it's directly above it mm-hmm okay we can you can sense the position let's try something like what could you use let's try 0 5 10 so it's X Y Z now we have dimensionality I love it that's okay next thing we are going to do is put some shadows that should make a new component called train component called plane mm-hmm okay this could be just a normal return you don't need hopes in this okay it will basically you know be a mesh am i animating this no it's just oh so we would need to add code okay so we got we've got a mesh mm-hmm and you give it maybe you could even copy the two things down there with where you did the stretching logic okay the mesh physical material doesn't need to be a we don't okay it's color you can just say white color is white hmm okay but we are not using the box called a plane buffer Material Plane buffer material mmm okay and do I keep this the arguments also different because plane is only defined by two axes let's make a mutant so if you say that's yeah okay this could you make it red better make it red got it oh I'm not using it yet is why we're not seeing anything and just does order matter like if I put the plane above or below that's gonna matter right no what surrogate is not a constructor what did I do did I screw something up playing buffer material or is it playing buffer of job geometry right oh it's completely messed up spot so we need to okay so you put rotate on us it's just a property on the mesh okay and let's flip I don't know both X Y or Y just metal flip on the x axis and how math.pi / - it means like half 360 degrees oh okay I got you mm-hmm but you need comma 0 comma 0 for X Y oh I get you so X Y wait yep okay missus still it's still missing another zero oh because we're in the sea yes and could you make the angle - that seems ignores XYZ and I think it's rotation not rotate I think you've wrote rotate what are you doing character why why are you like this needs to be rotation needs to be rotation mm-hmm okay all right there we go or better we have to evil cut off from a spotlight just you can remove if you go to the spotlight go to my spotlight mm-hmm and the property is called pin number if I pronounce this correctly pin number uh I don't know like that and could you to one just for that make it a little bit more soft yeah and it sucks if we can see the edges softest planar so we can cut this off by using some so just put some in in the 3GS scene you can go down there and do this cameras uh-huh you just say for kids it's like a generic component from 3GS what you know it's it's like everything is there but you need to attach that this is three years you need to save attached and to string this fork so basically it's writes itself in the property of 3GS and you need to give it some arguments okay like so the first one is the color let's say white oh like the earth is it art or it's always art this is always the same and it's always an airing so the first one is a color now is where the Fox starts let's say five humans five units and what ends 15 minutes 15 we good yeah so that's kind of cool all right a little better yeah maybe we should move closer to the object could you at the property camera to the canvas project and it's an object and just pivot position you say you you open an object position position and it receives array okay and zero zero I don't know five right now we should be okay and if I can go back to five 15 mil for these cutoff properties you can disable zooming by the way if it annoys you yeah okay so that's fun and now we need to distribute the shadows do we pull this it looks like this is getting cut in half by the plane right you can use the position property you can say minus 0.15 and that would be on the plane I think it's on the epsilon axis on the plane and exactly on the mesh and you say position again gets cats memory and zero zero and that would minus 0.5 as you know yeah okay okay we are very close now let's put a shadow Simmons okay after my guess we have made a giant step first thing I would do is put this back to two white holy buckets okay does plane subscribe me here okay so now we've got ya like basic basic colors the spotlights showing up fades to fade to the background mm-hmm just just need some shadow so in three.js it works like this you need to tell materials or measures that I can receive shadow and it works like this just puts receive shadow to this material to the plane for instance the glaze finish receive shadow not to the mesh okay doesn't work like this yes okay and for the box it needs to be able to I think it was called cast shadow and cast shadow also on the spotlight and that should be that should be it try it alright we are still missing something this was going to do suck and so my fault is 3GS again you need to you need to tell us that it's needs to create shadows so basically on the canvas element you have a property that's called own creative camera element which was down here now where is it here mm-hmm okay you cannabis you'd say yeah uncreated and this is going to receive an object or an object okay you can spread it for this it means normal bracket selamat like the normal will make the round brackets okay exactly now the the other brackets that you just said okay and you say AGL and it's a function so give it a function body how did this work it's GL dot shadow map shadow map dot enabled and tree enabled and to true sorry Oh gotcha mm-hmm to the same thing GL shadow map dot type and now you need to import three J's because we need to type from it so up there you can say in part dot s3 you can see now it gets ready it starts to get complex so you say dot s3 dot s like am I writing I don't start oh I guess yeah star s3 three years and they always use the big one like all time all caps oh okay three three and yes and snow we almost have it so better down there to the time and you say three dots I hope intellisense helps you PCF yeah tensors PCF soft shadow map okay and it sockets that's yeah that's course thumbs it should work it doesn't did it oh here we go I needed to reload so okay this actually looks pretty cool we almost take we have animation with internet so you can simply get right I can still click it yes and it turns pinging on mm-hmm and depending on the intensity of the sessions do we want to put a cherry on top or are you tired yet let's see we've got we got about 20 minutes left let's put a cherry on top all right you cold so let's make something really cool that's do you know is called sketch it's a website it's three people we pockets did that just work SketchUp that fa fa b fa b mm-hmm trainers you can get like free now through free 3d models from this just locking or sign it quickly just with y'all I think this is done that's right now oh I can just say yeah let me just sign up with no not that one dammit go back okay all right okay you can say just cover or whatever and I'm just gonna continue okay I have to do a thing what is it's not just just possible you don't need all right I will click like on the search icon let's get some cool model from this click downloadable so that you can download it okay future names I don't know space let's storm on some spaceship what's called on decent day costs yeah this one is cool the one on the upper left here that's for free okay yeah so we just say download 3d model okay so it's done okay hold on a second I got a I got a confirm my hello anyway I could do that off-screen I think yeah let's go to okay but I don't have that email oh here it is okay copy the link bring it over here all right and now if I reload I should be able to download this there we go [Music] gltf okay maybe you can make notes because Sarah she will explain all of the stuff to you I don't even need to bother okay so unpacked us now we have to model and in create reactor normally you have a folder that's called public I'm not sure if you have to send Gatsby like just something we can access from the yes okay yes I think no problem there what we can do with it is we'll put it in the static folder which is the same the same general idea just put the contents in there just all over like everything mm-hmm hey you can do this with I didn't copy okay this is cool alright so now we have access to those okay and let's create a new component that's called spaceship okay how I'm going to start it needs to loader and could you copy this line with the orbit controls it's basically the same thing we get the loader from the examples up there we have to import of which controls just copy the Vav whole line copy the whole line mm-hmm and duplicated and of thing is called gltf loader energy how TF this in cars like that and is this in like loader perfect yeah okay and then do ideally and do the same thing here nor this find this is just three it's okay okay this one is a sink so we need we need to be inside a effect oh the that's also fine I mean the function exactly use of factors all right so I guess everything that's that's acing it's an effect we could also do it in the main space or fewer Java scope fry but let's switch here okay and so this one we're loading model so that'll be a sink and pepper sauce it's easier than this not really hmm you just say GOG a floral or actually think it's new geo TF floater sorry yeah exactly so you construct the class and Louis file has no parameters okay and now you get a function that's called load Oh like I asked the students but once the first one is the URL of this file I guess it would be slash or seen gltf yeah like this and the second parameter is set function so you get no justice to do a you stage no here oh yes I understand sorry um you can say model and set or set level yeah this size nothing in there all right now could you so that we are that we know that underneath the IDI effect I guess console.log model and return now for now okay okay let's see if it works I've never tried this and Gatsby yeah we I might have to mess with that to get the to get that thing to load but let's pull this up it works it works okay no we just think you two presenters and that's easy so go back to the code okay here is our spaceship yeah the things like this actually have a imperative 3 J s object it's a real scene with measure some everything inside it normally we like to to declare our objects okay but if you have stuffing a red image like from from a foreign place there's a special object that's called primitive so just give it a JSX checked and call it primitive primitive then you say object and just cluster the modern science close to furniture and please check for the model if there's a model you say commit if there's nothing you say no because we are still racing that's right that's right that's right so actually you don't need the brackets for those because you can skip them oh yeah I totally can't do that I don't know it's it's fine it's just catching up okay so that I'm sorry model don't see no not all dot scene all right okay so let's cool and yeah okay so let's remove remove the Train holy buckets did that just work okay so we're gonna drop out the plane and I'm just gonna get comment this out so that when we commit this people will be able to see what's going on should I also comment out my box and maybe remove the fog I do like that it's like fading into the fog that is pretty hmm I guess from now on that's further right you know this course work yeah that way we can see a little bit more of it before we lose it and then we're gonna get rid of the box okay books is gone ooh but we lost our light because the box was casting shadows right so I think we lost yeah oh yeah the box had all of our ambient light okay the light looks a little bit too crappy could you put the light a little bit higher let's say 15 25 minus 15 25 okay it's I think it's still too it's too intense could you say on the ambient light intensity 0.5 yeah that looks a little bit more traumatic I guess oh yeah now yeah that's and I guess I removed the white backgrounds and make something black or this with darker like on D styles.css and on style will set it to dark but yeah you get the idea actually the scan results transparent so you could put like some big Jumbotron text behind or whatever you could put HTML elements you could interact so you have lots of possibilities with this yeah yeah so I mean that's like this is obviously this looks terrible but it's it's very cool that this is mm and so if I were to say I could I've got my canvas but I could put put something around it and let's say I'll put in an h1 that says and then in here we could take that and do like h1 font weight 800 800 font size we could make ooh 20 M we can do like text-align:center and we'll make the color hot pink again don't need to quote that as I guess it's did the bar don't does the fog eat it if you say he just called position:absolute and top:0 left:0 should be fun okay and then we would just want to do something like we could just do z-index before before well cuz I was thinking it's because I set the position to absolute so I can set the position relative on the canvas and we'll do a z-index of ten and that should fix it but then we lose it because of the fog so I think if we take the fog out then that would could you just move the H up there yep I can do that it's this I'm gonna move the h1 up above the canvas I think I feel like we put a background color and it's yeah where did you set it because if I take this out yes yes so oh oh I know why it's because we set the background of Lake they of everything so if I just set the body to background black give it a better form I guess try Helvetica the distance across this way like typical Gatsby type of like header image whatever so you can do pretty cool stuff yeah yeah I mean this is this is very cool and there's a I mean obviously a lot that we would want to fix here but just a start we are through you I guess I I give you like some small hints on how you will just be able to create elements like this rocket and then we are through could you could you google for blender I see I see you come from a designer micrometers okay I can't not fix it I so I'm searching for blender just the blender yeah if you know just I feel like this is gonna show me cooking stuff yeah no way yeah just yeah just showed up the first thing I was sure that that Google was going to like know my heart and show me a bunch of dumb like oh you need a ninja blender this is super complicated you can everything you see there when I was probably done with this software it's super super powerful has millions of buttons okay but I give you some very small YouTube tutorial it's I think it's like half lower if you can do this you can do some basic okay where and let's see I need to share some links so we've got this we had the sketchpad if you download something from other people and if you go to youtube going to youtube mmm blender to aids introduction introduction just moments it's a third here here if you ever buy anything from Apple okay he's teaching but you will see the software's amazing okay I only know the basics I'm not even sure if I could students Rockets maybe that's for for everyone who wants to check this out you can make your own model Olson's if you have the store open really web chill can be lots of fun because you can make game as you can make it for blogs and front yeah I mean this this is super cool I'm uh I'm really pumped up about this so I think we have like you've you've blown my mind already so I'm I'm super happy to be digging into this stuff where can people find you online is it is there a story behind that is there a story behind that that's like a bit point right I love that my twitter name gonna be okay yeah well I mean we we very much appreciate the work that you're doing on on react three fibre on on react spring this was super fun like I've had an absolute blast digging into this and getting something working I will get this put up online so that people can take a look at it what I'll probably do is take this final version on one page and do the the Box on another page so that we can look at both examples yeah but this is uh this is super super exciting stuff I think it's it's really cool to see like how approachable this is like I never would have thought that I could put a rocket ship in space that that worked in the browser and do it inside a 90 minute so Paul thank you so much for coming on everybody stay tuned we've got we ended up having to reschedule with EJ next week but we've got several things coming up come on buttons workout schedule is what I'm trying to click so EJ and I are gonna reschedule but I I think still confirming I think we're gonna have Phillip look then and jovi from formidable come on and teach a circle which is going to be really cool Oracle's a graph QL library it's similar to Apollo and then Monday after that we're going to have Sara's and Ron to teach us three Jas so that'll be kind of a continuation of what we did here we'll go a little bit deeper she was going to show us how to make I think she had a plan to like Auto generate 3d houses which is going to be amazing yeah all its it's gonna be great so I think with that we're we're all we're all done we're set to go I need any final words no in this note I have some fun place for doing gross obviously thanks for doing it for free so everyone can learn I I really admire when someone dust us it's great and yeah try those awesome alright thanks so much and everybody stay tuned we're gonna raid here in just a second so we'll see you next time right

Channel: Jason Lengstorf

Views: 34,322

Rating: 4.950429 out of 5

Keywords: twitch, gatsby, three, three.js, react-three-fiber, react-spring, animation, 3d, javascript, web development, live coding

Id: 1rP3nNY2hTo

Length: 88min 43sec (5323 seconds)

Published: Fri Sep 06 2019