3D Scroll Animations Have Never Been Easier! React Fiber + Next.js 14 Tutorial

hey there my gorgeous friends on the Internet it's me and mini me if you want him to disappear you just have to say his name three times Min me Min me Min me Told You So lately I've been messing around with 3D I always felt like 3D adds so much life to a website like the last websites I remember being blown away used 3D in a very clever way uh so I've been learning blender and stuff like that and I feel like there's no like good tutorial on YouTube like even like to do like a scroll animation you know how how do you import like a gltf a 3D model from blender or from wherever into your nextjs app or your react app and then create some animations within there so no tutorials well there is one now so it's this one right now so let's do it so yeah let's get into it and I promise you like once you see how easy it is you're going to be like oh damn I didn't know you could just like add a model like that and animate it so easy so so the first thing would be to find a model right you could do either sketch Fab they have free ones here some free ones some paid ones uh you can just go here to 3D models and do downloadable and animated that's what I usually do and then yeah you can preview them a lot of them have multiple animations on them some of them don't of course if you want to do something custom you can model it yourself in blender which let me know if you want to see that I love to make tutorials on blender I'm not sure I usually when def C I'll watch the video later um yeah I'm not sure are people interested my channel here uh to blender stuff or is it just like mainly coding I also would love love to like experiment with goang and stuff like that you know sorry not to like blabber a lot but and here we go it's robot playground so let's click on this and you can download the 3D model and you want to get the glb version here this includes all like the textures and animations within one file if you do gltf it's usually split makes like a bin as well and a gltf and then like a texture folder and you have to like link it together this is going to be really easy so you can do glb and they usually also do like different texture sizes like a 4K variant a 1K okay so let's head back to Local Host and these are the packages that we're going to need to install we're going to need um 3js we're going to need fiber as well reactory fiber this is really nice because it'll just like give you the components to put together your 3D animation so you can just like create the react component that holds like a model and then you can just pop it in um and then you have Dr or dry for my German folks out there b Mau um this is great it has like a lot of little utility functions that you can use to just make everything everything with 3D easier and then postprocessing if you want to add cool effects okay so the first thing we'll need to do I'll just make a new file here called scene. TSX we'll need to set up like a canvas right so here we'll just import use client at the top and we'll import a couple of things canvas and this is going to come from react fiber there we go we'll create the scene as you can see autoc completed for me I'm not going to need all of these we'll do a a we'll just do a directional light in here here we go and then you can specify the position uh with an array here uh I picked intensity four let's do four and the position here I did minus 5 Min - 5 and five and you can preview this you're going to see it in just a sec um okay and then here one more thing that you need to do is here's where we're going to need to create the model so we'll make a new component here and call this um model. TSX so let's define this model function like that um and here what we're going to return is going to be a group like that and this group is going to hold a primitive shape here or object now the way we need to import this is you'll need to grab your gltf and drop it or glb and drop it in your public folder and the way you can make this work is like this I looked everywhere on damn internet for this but this is the the method I found so you import this use gltf from Dre okay and then at the top of the file here you can do gltf sorry use gltf the preload and then here for the model path all you need to do is pass in slash It'll recognize the public folder and then the model name so it'll be robot playground. glb okay so that's the preloading up there at the top and then with f here we'll say we'll grab this group cuz we'll need to make a reference for it so we can say use ref and say passing null here but we can pass in a generic here to give it its type which is going to be a group type and I believe that's from 3js yeah and we'll need to import use ref as well there we go so now we can just pass it down here set that equal to group and now to actually access like the materials and the nodes on this we can use this usgtf again like that okay so use gtf and then we pass in the same path as we did up here so we can extract like the nodes and materials and even the animations here like that so for this primitive here what you can pass down is say object and you can just pass down like the entire scene like that okay so now now that we got this loaded up we can go back here to the scene and import our um model so let's do model like that now they recommend you to wrap this in a suspense so let's do suspense I'll just leave the fall back to null here we go aut to complete thank you very much like that so there we go now one more thing we need to do is import it here and render it out like that and hit save now this works right now but you you might have problems with this um especially when you're doing animations and even some of the textures are not going to properly load up because it's going to try to render this out on the server first and it's not going to have access to a bunch of Windows stuff so what we need to do is use next Dynamic to basically fully load this up on the client uh so let's go back here so rather than importing it like that what we need to do is say const sorry import Dynamic from nextjs and then you do con scene equals Dynamic and then you do your import here like that with the scene and very important make sure you set SSR fals here for the second argument okay so then we can render out the scene again make sure you remove this one from the top and hit save oh let me show you now there's like lots of cool little things that you can do in here for example you can even display like a little loader here for the suspense let me just show you this really quickly so I'll go let's let's go above here I'll close the side panel up um you can import this use progress from Dre and also the HTML from Dre like that and then you can just to fix it like that and display this progress here instead of the fall back null so we can do loader like that and hit save let's check this out well let's cache now we do an empty look at that see you got the loading State there that you can mess around with this and style as well now here for the canvas you can also add GL antialiasing true so you don't get jaggy lines and you can even adjust the DPR here so the pixel density is a bit higher now rather than just rendering out the model what we can do is drop it in a scroll controls that comes from react Dre again so let's wrap our model around it like that and then here we can Define like the damping thing so we'll do 0.2 and the amount of pages so this is like how much you can scroll giving you like 100 VH you can imagine so two pages would be 200 VH um and we're going to test this out I'll come back to this I'll just leave it like this actually now back in the model let's go down here we can get this use animations Hook from Dre like that and we'll need to has down two things here the animations that we're getting from the robot and also the scene itself now here you'll have actions which holds basically all the different animations you have on it and clips as well so let's extract these two and then here's the little magic that you can run um use effect we'll need to import use effect and use frame from fiber okay so let's hit save so check this out so here we're accessing the actions and if you console log this out let me just show you console log actions and check it out here in the console it's basically going to give you the object with the animations that are on it and if you check on sketch Fab it's going to like tell you here so this one doesn't have an animation but like if if we do animated uh let's do a sphere I saw there was a sphere look this one has like loads of animations that you can experiment with so you can toggle between sphere bot then we can do a Run Cycle right so you can access all of these here and pause and play them and switch between them how cool is that but what we'll do is just a scroll so here here's the logic for it first of all we'll need to run this use effect here uh to essentially pause our animation at the beginning and and then we're running this use frame where we're accessing that specific animation the time function on it and then here we can update the duration with the scroll offset and the place you're getting that scroll from is you just import scroll equals U scroll there we go from Dre that's all you need and you do the offset here okay and now if we scroll look at that it works and not only that you get this nice dampening effect so when you top it kind of slows down a little bit it's not like jaggy you know like look at that so I stop scrolling but look catches like velocity it's really cool uh you can change like [Music] the the speed of this so if I want it really slow I can put it down to eight and now as you can see when I scroll see it's quite slow but that's much nicer so but there's not enough space to scroll see so what you can do do is increase the pages here to like the amount that you like so now we can go much further in the animation maybe that's a bit too much if we do four here and three pages let's give that a shot so scroll there we go how cool is that and you can experiment with the dampening as well see how much longer that goes when I stop scrolling so maybe that's a bit too much maybe 0.5 will be quite nice so Scrolls yeah see how cool that is so there we go now one thing I must say is like you can't get the types for these actions let me know if someone works on the fiber tee or whatever on the drive uh is there any way we can extract types here that would be really cool so that's going to be it for me hope you enjoyed this episode drop a sub drop a like and yeah let me know about the 3D if you want to see more of that stuff

Channel: developedbyed

Views: 23,193

Keywords: 3d, 3d scroll, 3d animation, next js, nextjs animation, react fiber, threejs, next js tutorial, animation tutorial, react, drei, awwwards, awwwards animations

Id: QzPuWB9Pius

Length: 12min 55sec (775 seconds)

Published: Tue Apr 23 2024