Spline Tutorial for Beginners: 3D Website Crash Course

Key Takeaways

today I'm going to give you a crash course in spline and we're going to be building this hero section for a water bottle company that kind of interacts and moves when you're overover the mouse this is going to be really really awesome if you're a beginner if you want to learn spline spline is an amazing 3D software tool specifically built for embedding 3D scenes in websites and people are doing crazy things with it and now with a fullon web flow integration it allows you to create really really amazing websites so in this crash course fear not we're going to start right from the beginning and I'm going to take you step by step until we're going to build this and implement this in our webflow website but this can easily be implemented in any other website you want to work with a framer whatever uh it can be implemented in any website so let's get right into it okay so I'm insine and I've opened up a new project and out of the gate I've got a bunch of kind of like presets to start with which look kind of useful but I want to start from scratch to show you everything now before we get started I want to tell you that right here on the left we've got a library that's got tons and tons of useful objects for your projects now in this one I want to teach you how to model the basics of modeling so we're not going to use this but even if I search for a bottle here um I would probably find a bunch of useful things that I could have started with and this can be really really useful if you just want to find stuff to get started with so we're not going to use this and we're going to look at the interface that we've got here over to the left panel you can see what looks like a layers panel and basically tells us what we've got in the scene already so we've got a light and we've got a rectangular uh which I don't know why it's here and I don't need it so I'm just going to delete it now I'm going to start from this creation panel that we've got at the top here and we've got a few things like a cube and a sphere but we've got even more stuff right here so I'm going to start with a cylinder because that makes most sense for a bottle and and I'm just going to drag here and basically this looks like a rectangular not like a cylinder because this is looks like a 2d but it's actually in 3D if I'm going to hit the option and drag my mouse now I'm changing the perspective of the camera and all of a sudden you can see that this is actually a cylinder I can hold the space bar to pan and I can hold command and scroll with my mouse to zoom in and out and we can see that we've actually got ourselves a little cylinder going on here and we've got this Gizmo which allows us to move this thing up or down or to the sides or in this one you can see we've got three axis because this is in three dimensions and if I click on this little circle or cube that I have here I can even scale this on this Dimension or scale this on this Dimension I'm going to undo that or I can hold option in shift which is very similar to other design software and I can scale this proportionally and I've got these which kind of looks like they're about to rotate rotate so it makes sense right we can rotate on three angles as well okay so this is quite good to get started with maybe we'll kind of like even uh make this taller because it is a bottle now out of the gate you can see that it has kind of like round corners and right here in the properties panel you can see that actually it does have round corners it has eight and I can make this even rounder but the first thing I want to do is remove the corners all together just so that we can get started and model it and starting to uh you know model this into the bottle just like we want it to be so let's see how I'm going to do this I'm going to start with this shape and I'm going to click here smooth and edit now this basically gives me access to how the element is built now it's also trying to smooth this out and you can see here with the subdivision modifier it's kind of like smoothing things out here I'm going to remove this as well so we just see now the way 3D objects are made if you've never worked with a 3D software before is basically we've got dots um let's actually go ahead and you can see here vertex vertex is these dots basically every 3D object is made out of these dots which you can basically again move around and you can see how it's changing so we've got these dots these dots are connected together by these edges which I can also kind of like move around and they are connected with faces right which I can also move around so you can always switch between the these um things between the dots or the vertexes the edges or the faces now to get started shaping kind of like the top of the bottle I want to select all of these top faces now the way I'm going to do this is we've got this Gizmo here below which allows us to snap the camera into a Direction so if I want to look exactly from the top I'm going to click on the top and now you can see I'm looking at the Top If I'm going to click this one I'm going to look exactly from the side and of course I can hold the option to move things around freely but to select all the ones in the top I'm going to click on the top and go into the faces and basically select all of these now I'm not sure whether I selected you can see I've selected actually everything and that's not exactly what I want so let's go ahead here into into the properties and I see that selection let's do just front and see if that works so I'm selecting all of these and now exactly now it selected only what I had here now what I want to do with this right now is I want to to extrude it and Extrusion you can see here with the icon it's basically pushing or duplicating these faces to the top best is to just show you I'm going to click this and I'm going to just push it up and you can see that I've basically created new faces and the reason that I'm doing this is because now I can have these faces and kind of like maybe scale them proportionately this way and maybe take this up a little bit more and do it this way maybe just a tiny bit to the top and maybe extrude it a little bit more maybe even scale this up uh let's scale this down a little more and then extruded to the top Okay so we've got kind of like a bodily shape we're we're starting to get the bottle shape done correctly now let's make it let's create holess I guess we can call it I'm going to scale these here and actually let's take this down no not like this let's scale it again and now we've got this bottle yep now we've got this bottle which looks actually pretty good now actually I want to delete the the faces that I have below so that you know the bottle is open so I'm going to hit backspace to delete them and now we've got a bottle right let's take a look at how this looks from the side and we can start taking care of the bottom I think the top of the bottle looks good let's go ahead and take a look at the bottom select these not the whole bottle um just just the front and take a look here nope just I need just the bottom okay this looks good and now I can go ahead and extrude these down a little bit scale them down um this way so that we've got kind of like roundish corners um extrude again and maybe maybe take this up now a little bit so we've got like this round inside of the bottle and actually I think if we're going to look now let's say select the vertices on both sides and just make the bottle taller a little bit taller okay I think looking at the bottle we've got it nice and we can actually now go into the sublevel modifier and add one two to kind of like to smooth out how the bottle looks like now one thing I notice is that when I'm looking inside here looks like the there's nothing on the inside and I think this is because on The View here we're just seeing the front of the faces and we need to see both of them okay so now we can see both the inside of the bottle and the outside okay we've got the bottle it looks good we can go ahead and start doing the cap small cap at the top so let's do another cylinder and create it right here on top of it we can also go ahead and you know what to be fully organized we can go here and to the position and you know move them to position zero zero and maybe zero here and this one zero zero just to make sure that it's completely on top at the same centered to it uh we do need to bring this one up so let's move this up here okay so we've got the start of the cap that looks good but let's go ahead and model that as well I'm going to uh remove the corners on this one as well actually let's go ahead and hide this bottom cylinder let's add it and smooth this remove the subdivision and we're going to have the same process that we had before let's select the faces only those on the front um and select these and then let's extrude them so let's go ahead and extrude a little bit and then tiny little bit kind of like this way and what I can do with this is that now I can go ahead and select the faces on both sides and select here no let's be accurate and select only these and now I can scale these up and you can see what I've done here we've got kind of like this nice top to the cap so that you can hold it once you're rotating it and we can also go ahead and select go here and select this inner cap that we've got here not all of them so let's shift select only the ones that we need here to the bottom because we need to create the you know the space for the bottle to come in so let's extrude this and scale it and then extrude again and take it up okay so now we've got the exact space for the bottle to go in there so I can go out of the modeling I can add a little bit of saiv visioning to smooth this out and let's see how it looks with the bottle can maybe scale this up a little bit it's actually pretty huge if we're thinking about this so maybe let's add the mash let's go ahead and select both sides uh so that we can select the vertices here and just bring this down a little bit next I'm going to change the proportion of the bottle a little bit so so I'm going to select these faces move them down a little bit and also maybe let's change let's scale the bottom a little bit so that it's more round like this okay let's talk materials so let's select the bottle and look at our material panel right here we've got a base color um which we can pick some nice Bluey blue so let's do that and then we've got light now on top of that we want to add a new layer and here we're going to choose mat cap now mat cap is basically a material that includes the light inside of it so it doesn't react to the external light that we have and that's great when you need when I click on this tiny icon here when you need to reflect some of these things here so it's great maybe for glasses or metals and stuff like that and you can click here and see how different Reflections might look like you can see that this basically comes on top of everything else that we've had so we we can't see the color anymore because we've got this black and white matth cap on top of it so to make sure we're only seeing the highlights which is what we want we have blending modes here so I'm going to click this and I'm going to select screen play around with this and see what you like so we've got the math cap we've got the lighting let's add another layer and here we're going to choose this fresnel which also gives kind of like reflections of how metal would look like this is a little bit harsh um also the colar maybe we'll choose a bright Bluey kind of like this and see that it gives kind of like backlight behind the bottle so that's also night now the last thing I want to do is I want to give this a little bit of texture to it and you can see if we're going to pick on the light here we've got something that's called a bump mop how bumpy the material is but to use that we need an image layer to pull in that kind of like depth so what I'm going to do is I'm going to add a new layer which I'm going to select as an image we can click this icon to basically either upload an image or use something from the spline library in this case I'm going to use use this grass that we've got here now we can't see anything or at least we doesn't look like we're seeing anything but that's because we want to change the projection here let's change it to Tri planner and I think that looks better we can zoom in to see how that looks now currently it looks like a grass how is that helping us let's see what I want to do is I want to bring this in under the lighting layer I can also go ahead and reduce the opacity to zero cuz we don't want to see this but now going back into the lighting clicking on it you can see that under bump mop I can now choose image number six and when I click it you can now see the texture that we we've got here which is basically the grass texture on the bottle now this looks very extreme and we're going to reduce the intensity from five to maybe 0.2 to make this really delicate I would go even to 1.1 or 1.15 to make this a nice metallic texture like this okay I'm kind of happy with this now what I want to do is I want to duplicate this material to the cap here so let me right click on this cylinder copy the material select the cap and do paste material now we've got the same material but for this one let's go ahead and make the color darker so we've got something like this and let me see how things look okay I do want to add the flock logo to the bottom because why not I can right so I'm going to the cylinder again and let's go ahead and add another layer here that's going to be an image let's this time let's upload an image and we've got flux logo here so let's upload that let's go to the projection let's do spherical or cylindrical this time okay now we can see it but it's flipped so we got to flip it so let's select it again let's go into the image and let's in the scale let's do minus one so that it's flipped now it looks okay and let's also increase the Y so that we've got the right proportions I'm going to zoom in here so that we can see what we're doing change the Y okay now this looks good but it looks kind of flat on this metallic thing so let's go ahead and change our blending mode here into uh overlay now that looks pretty cool because now we can really see the metallic on it but the thing about this is that now if it's not in direct light it's kind of like too weak I would say so let's go ahead and duplicate this so now we've got two layers of this and this layer we can just make it instead of we can make it normal and just reduce the opacity so now you can see we're benefiting from two layers one of them is an overlay and one of them is just kind of like lower opacity and I think that at this point this looks pretty good let's continue the next thing I want to do is create the interaction so every time somebody is going to hover on top of the bottle I want to create this kind of like movement in the bottle to do this what I'm going to do is basically create different states on Hover and off hover State now the way I'm going to do this is I'm going to choose the the part that I want moved so for example let's pick the top the cap and right here at the top you can see that we've got States so let's add a new state now we've got like the base state which is what we're seeing right here and then we can create a new state and for this new state let's move this up kind of like this so the bottle is now being opened so we've got a base State and then we've got another state okay let's go back to the base State and let's go to the bottle and do the same for the bottle so let's create another state and in the another state we're going to move this down a little bit and maybe roll this over to the side Okay so we've got two states for the bottle and two states for the cap now because these are grouped together I can go ahead and now add basically an event for the bottle so I'm going to click plus here on the events and I'm going to choose mouth hover now what I want is a transition and what I want not transition for the bottle I can choose here what I want to transition so I want to choose let's do cylinder first and I want to transition from the base state to the normal State the second state and this is basically how fast it moves and kind of like the easing I'm going to do for the fun of it I'm going to select spring so we've got the first transition let's go ahead and add another transition and the second one is going to be for cylinder 2 again from base state to the other state springing let's select the spring okay so now we've got two things happening on Hover let's play out to see how this looks I'm hovering and it's jumping and it's springing and it's opening and it's very very exciting it was pretty easy to set up okay the last thing that I want to do is bring in some text to go ahead behind the bottle okay I think this is nice okay so this is good the last thing that I want to do before I'm implementing this into webflow is I want to add another interaction that kind of like when I move the mouth besides the hover we can pan out a little bit and I can actually set this up on the export settings um if we go here to the play settings we can see we we've got a bunch of stuff to actually choose here before we export this I personally do not want the logo uh background color we don't need it or we can show it it's going to be white anyway page scroll don't scroll cursor default orbit yeah orbit is what I want I don't want pan I don't want people to zoom um so what I do want is on Hover I want to orbit the camera not a lot so I'm going to reduce this to 10 and let's actually play this out so first I'm going to to update the public settings and then I'm just going to play this out and see how this looks okay so let's play this out and now you can see that as I'm moving my cursor I'm also rotating the scene okay so I've got an empty web flow project here was basically just a navigation and a little text and a button here now webflow has a native spline integration so you can just add a scene here here by dropping in the link and all we need is this link here which I'm going to paste here in webflow and reload the spline scene and B bam we got it so let's go ahead and play out this website and basically that's it and it's working and it is super super nice now webflow also allows me to using the web flow interactions to interact with these scenes move things around animate things around so it's very very cool and the possibilities of what you can do from here on are just Limitless so I'm very very excited about spline let me know in the comments if you want to see more tutorials if you want to see a fullon course for spline let me know and I will see you on the next video peace out