Make Animated 3D Website Scenes Using Spline

what's up everybody i'm jesse showalter and in this episode i'm going to be creating some animated interactive 3d design elements that i can implement into a website project i'm going to be using spline today as my 3d tool of choice which is an amazing tool it's easy to start using if you've never done 3d you can create anything and everything you want the sky's the limit your imagination can take off inside of 3d we'll be doing that inside of spline and then directly applying and embedding our 3d design into our website using webflow so if you're interested in something like that stay tuned because we're about to go 3d okay i have adobe xd open so you can show you my original file uh that is just kind of like a two column layout form on the right and then design that i made inside of photoshop on the left hand side uh the problem with this is no matter how good it works or how much auto animate and 3d you do in adobe xd it's gonna really be exported as a movie file i want it to be more interactive and more three-dimensional so i've come over to webflow i've recreated my website i have the right hand panel here left hand here and i have an embed area that i've set up and all i'm gonna need to do after i'm done with my spline file is embed that code there and it should pop up we'll see how it goes um i have spline open go to spline.design i'm gonna go ahead and open the app and start a new file by hitting that big blue button in the top right corner and we are ready to get started i have a uh rectangle on the screen i'm just gonna get rid of it i don't need that everything we're gonna do is gonna be pretty three-dimensional here speaking of which i have found a free 3d model of a medusa sculpture now it's not the same medusa sculpture obviously but this one is going gonna actually be three dimensional this is uh my mini factory where you can get like 3d printable items some of them cost this one happens to be for free so i just went ahead and downloaded that and i'm gonna come up here inside of spline and i'm going to import my 3d model i have it on my desktop it's called bust of medusa there it is and that'll just take a moment for spline to do its work okay now uh it's put something there i'm gonna go ahead and reset the camera and it's pretty it's pretty small like on my screen right you can see it there but i want it to be a little bit bigger so i'm gonna select my uh my medusa sculpture and i'm gonna just go ahead and lock the scale i'm gonna bring this up to two three maybe four ah let's go with five okay so now we have a nice big object and uh that looks pretty good now i'm using spline in the browser which is a new feature of spline which is absolutely amazing i i love using tools in the browser and when there's a tool in the browser as powerful as spline that allows me to do all this right here from in the browser man i just cannot get enough of it so browser is the way for me now what's really cool here is uh we do have some environment lighting going on the right hand side right so if we turn the light off you can see there's no light happening and now all of a sudden there is a little bit of light happening but we can change the intensity of that light if we want to which is actually kind of cool um and we can turn off any and all ambient light um okay cool so we we've kind of messed with the environmental lighting but um in our original design file it kind of had some directional lighting it actually had kind of like some gradients going on um that were just laid on top but maybe we could do that with lighting here so i'm gonna actually hit my plus and i'm gonna go down to the bottom and i'm gonna hit give me a directional light now you can see i have this light source that is in my scene it's an object that can be moved around i'm gonna lift it up and i'm going to move it in front so it's kind of hitting the right hand edge of my statue it's pointing straight down currently but you can manipulate how it kind of angles a little bit right by using these three internal dots pretty cool we can move it over we're digging it and just changing direction and you can see that little helper is actually really really helping us on where it hits our statue now we can take that directional light and we can make it a color the top right was very very pink in our design so let's make this pink um and we can make it really pink like that if we wanted to and maybe maybe we move it off to one side this is it's looking pretty cool i actually really really like this i really just wanna it's not gonna be exact i just wanna give it some cool kind of glow now i'm gonna do the same thing uh i'm gonna call this one uh pink light up in my layers panel i'm gonna copy and paste and do another or you know what that came out kind of wonky so i'm just gonna do another one like this [Applause] uh i wanna add a little bit of i think animation to this thing um so how about we do a constant spin of this so where we can make states and events in this top right hand corner so i'm going to bring my medusa up there so we can see it um i'm going to create a new state so we have the base state that's how it currently is sitting state number two let's add some rotation and we'll add uh 359 degrees of rotation and then we'll do an event that says right new event on start so as soon as this whole thing loads in my browser we're going to start it uh we want to repeat yes we want linear easing and we want the whole thing to take about 10 seconds uh so we should be able to press play and we get look at that lighting continuing to work for us really cool now the problem is the lighting is fixed in a group right or like with the rest of it uh the with the statue itself but that's okay that works for us okay so i'm just gonna reset my camera right put it right where we have it i like it a lot that is the beginning of something great uh let's put our next piece in i'm gonna grab an orb not a not a circle but a sphere excuse me and i'm going to draw out a nice cool looking sphere now in three-dimensional space i kind of want my sphere to be behind uh and like behind my statue of medusa um let's move it around just a little bit more and it looks really really pink and really really blue right now because it's kind of taking on that lighting but that's okay um you can actually see you got to be careful in 3d space where you move things because it's starting to kind of fly into the back and then through our object which is kind of cool but i actually want a little bit of space so i'm just going to space it out there it is just like so and i'm going to do something kind of interesting instead of having a color i'm going to come in here and i'm going to put a texture on this thing and it's important to note where you put lighting and texture right we drag these layers around you can see i have my texture above the lighting i'm not getting any of that dynamic lighting which maybe you want or you don't but if we put it below we get that lighting taking place on the object let's grab our texture upload an image um and then i'm going to go in and find a a little bit of in some assets that we had i have this really cool uh like tron landscape type asset and you can see it's kind of being used in the background here so i'm going to reuse that and it doesn't have to be exactly the same but it's pretty close pretty cool i like it i like it as is now um what do we want to do with this right now our statue is kind of moving around which is cool how about we do something on hover with this one so we'll say hey state one is a base state there state two uh why don't we do some rotation this way that way and then we will scale it to one point two 1.2 so the orb will get bigger and we're going to create a mouse hover event on the sphere we don't want to cycle or repeat only when it's hovering and we'll do that in a second so we should be able to come here and get a little bit of interaction out of this thing which is pretty rad pretty fun okay um i like it i like it a lot so far so good i'm gonna move my uh my medusa over to the left just a little tiny bit like so uh and then uh what else do we have maybe we had some other textures we wanted to put in there or maybe we just want to create some other cool shapes let's do some other cool shapes that could be fun i'm going to drag another sphere onto my canvas here and i'm going to do something a little bit different with this one well i'm going to do first i'm going to do something similar i'm going to go to texture i'm going to grab a texture that i really like i had kind of like this oil slick texture which i really dig but i'm going to add a new type of material so let me zoom in so we can see this i'm going to add a type of material called displace now i'm going to make sure that's underneath the lighting so we're capturing the lighting but what displace is going to do is it's going to affect the entire area of my sphere i can displace it out a certain amount like i like that i want to be just kind of soft that's kind of nice this lighting is kind of harsh so i'm actually going to jump more to a physical lighting and drop the lighting down just a little bit maybe something like 30 look that physical lighting gets a little bit more of the gleams and glares on it and when i go to displace i'm actually going to hit the icon here and i can scale my my shape or like all the displacement of my organic shape as much as i want i can actually create movement which i want to do actually through animation so i really like this shape that we have cooking here and you can see because there's lighting it's casting shadow depending on where it's at in my scene so i don't want that i want to be kind of behind so it's not casting too much shadow over my medusa sculpture we like it it's a little bit big i might shrink this whole thing down which changes the way that my displacement looks but that's okay um i'm gonna keep it right there and just go up maybe a little bit more beautiful let's create a state um and uh we have state one state excuse me base state and state one let's go back into displacement and do some movement so we'll just get this kind of wobbly effect i just drag that over and i want it to constantly wobble and this time i'm gonna have it kind of like on my event we'll do this on start and it's going to cycle rewind and repeat ease in ease out let's do something like uh seven seconds for that so it will constantly be wobbling and if i hover over my orb we get some of that and again the whole thing is in 3d which is pretty pretty fun it's coming together i'm digging it all right next thing i'm going to do is a little bit of custom modeling and it's a new feature inside of spline it's really really fun so i'm just going to grab a cube and i'm going to drag that onto my scene and i'm going to move around so you can see it in three-dimensional kind of space here drag it out and what i want to do is i want to come into my shape i want to hit smooth and edit in this right hand panel on the side and it's going to allow me to create some subdivisions i'm just going to keep mine flat because i think that is going to work for me all it's doing is creating more divisions and surface or different facets basically for me to work with once i've done that i now have almost like an illustrator you can double click on any of these objects to get a new set of tools up here in the top right hand corner we have the face tool which will allow us to grab one of our faces and stretch it out and in doing so we create new faces right and we can grab this one you can almost build like uh like all these really fun like geometric shapes and you're being really really like it looks like a tetris piece which is really fun you want to build a tetris piece bam you can do it just like that the other thing you can do is you can affect the edge or the vertex so the edge is literally grabbing the edge there and pulling those out or the vertex which would be just the points right and we can again you can rotate any of these lift move change right if we go back to the face select the face we can rotate these and get really really cool custom shapes but now we can also not only extrude and get like new versions of faces but we can also inset so i'm going to go ahead and make an inset right here with my big blue handle and then i'm going to grab the arrow and just push it in now we're creating like concave surfaces and you can also loop cut which means uh just pick a side and it'll cut it into multiple kind of areas which is nice so now we can mess with any of those edges and sides and vertex okay so we've got a pretty cool shape here that we've made we want to get it into our design it's pulling in some of that lighting from the scene but why don't we give this a cool color and i'll actually um i was going to mess with the blending modes but we don't really need to why don't we just take the lighting of this down a little bit so it's not so intense because that's really intense lighting we can give it a texture and play around with this thing and look by getting more subdivisions now we're creating more of an organic shape which is actually kind of cool it looks like a really cool tube or straw so why don't we work with that um and we'll bring this color down so it's not so intense right that's kind of a cooler looking color it's not so cartoony let's bring the size of our element that we've created and down a little bit and move it into our scene and again we don't want it to dominate the scene so we're gonna move it back behind our medusa um so it just has a little bit of fun like dimensionality there okay let's make one more thing and maybe we'll add some glass elements into our design i'm going to hit plus and use all these really fun uh pre-created shapes i'm going to pick a taurus which is basically how we would start building a donut love that uh and instead of color you can see down here i'm gonna pick a new one remember we mess with displace and texture uh we can do gradients and noise i'm gonna add a little bit of noise in here and then i'm gonna do another one and this one is going to be glass and i'm going to make sure the lighting is on top and when i move my shape near my design we're getting a little bit of noise and we're getting a little bit of a glass vibe to it as well so let's actually slice our donut a little bit and i'm gonna add i think that works for us i'm gonna rotate this thing so i like the donut piece up there and i'm gonna pop this in i might leave it on top of my medusa which will make it kind of interesting and let's press play and see what our scene looks like right now so we're able to scale around move around and uh when we hover over our globe that happens right we get a little animation i'm going to reset the camera and we're setting the camera like so and maybe we can add just a few more pieces of animation to our taurus and to our custom shape [Music] [Applause] so now i'm ready to actually embed this thing into my webflow project or into your website it doesn't just need to be webflow i'm going to hit export give me a public url hide the logo yes we want to be able to rotate limits yes let's put uh oh let's no we'll put no limits on it turntable yes pan zoom all that fun stuff so it's super duper fun and interactive spline's gonna do the magic for us it's gonna create a public url and an embed code uh the public url is exactly what it sounds like and go see it on the web the embed code is actually what we're after so that we can actually just pop it right into that embed spot so there it is it's an iframe and grab the whole thing and copy it i'm going to come over to webflow open up that embed pop in the code save and close and preview in the browser so to speak there it is and we get full kind of like edit capabilities or excuse me pan and zoom and rotation capabilities out of this thing and it's all happening in 3d and i think that that is a way cooler kind of nft experience if you're going to log into this bad boy lighting rotation interaction animation all that stuff right there using spline popping into our project well that's it that's how you use spline to make cool amazing interactive animated 3d elements and pop them right into your projects and they work like a charm i want to say a big thank you to the folks over at spline for sponsoring this video it's a really cool tool should go check it out you can get started for free today links to them are down in the description hope you guys enjoyed the video if you did make sure to leave a thumbs up subscribe to the channel hit that little bell notification icon so you know in another video like this one about 3d or design or spline comes out if you have any questions leave those down in the comments i hope you are having an amazing week i hope you're designing amazing things i hope you're making amazing things stay inquisitive creative we'll see you in the next one

Channel: Jesse Showalter

Views: 228,678

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, spline 3d, spline tutorial, spline.design, 3d design, 3d design software, 3d design tutorial, 3d design drawing, 3d design in photoshop, spline design, ui design, spline design export, spline and webflow

Id: Tb9JomN4esY

Length: 17min 2sec (1022 seconds)

Published: Tue Dec 14 2021