Easy 3D with Spline - Tutorial

Key Takeaways

where's ran though oh there he is oh you want me to take care of it you want me to do today's video oh okay all right i got you anyway looks like i'm taking over today guys but today what i have for you is a super cool 3d tool that i guarantee every single one of you can pick up in less than a day let's have a look [Music] so hey guys i am not rants to go i'm izzy but nonetheless welcome back to flux uh it's pretty sad to say but rand decided to move on to bigger and better things uh he started a new channel it's it's a wildlife channel um so he's out there in africa right now filming creating content uh if you want to check out his channel just go to the description just kidding uh ryan is still with us i'll just be popping in with a video every now and then uh leave a comment if you like this video and i'll make more i'll pop in more often but anyways today i have something super exciting for you guys it's this brand new 3d tool called spline and why i'm so excited about this is because i often get comments roughly comments on instagram at least from you know seasoned designers sometimes that 3d seems to be sort of intimidating for them and that's understandable you look at popular 3d tools like blender or cinema 4d and the interface is super complex and hard to pick up but this the ui is super simple familiar kind of looks like figma sketch adobe xd it's super easy to use you got you can easily share your work with a with a link exactly like figma and the crazy part is the 3d that you do create and that you can embed on your website it's interactive so site visitors can play with the drag around drag the elements around and kind of play with with your creation so let's have a look so here's the spline website i wanted to give you guys a quick walkthrough of their website before we uh before we jump into the actual tool itself so this is spline.design pretty slick website as you can see and if you if you scroll and you read through their copy their whole thing is all about you know ease of use and accessibility so you know easily create and publish 3d web experiences build and iterate fast with production ready results so their whole thing is they know that there's a ton of designers out there even seas even season designers that are a bit intimidated by 3d and understandably so i don't know if you guys have ever seen a tool like blender or cinema 4d if you open up the interface the blender interface at least like it'll give you an aneurysm i'll throw it up on the screen now the blender interface but this here here's a preview of the spline interface i mean this is actually reminiscent or very familiar uh this looks like a variant of figma or adobe xd or sketch i mean you have the layer panel on the left here the shapes up top super familiar which is always nice so here they're actually using spline on their website this is a 3d scene built with spline and what's really cool about this is it's interactive so not only is this easy to produce but it's also interactive so i'm actually dragging this around i can drag around i can play with it and at the top of the this page this these actually have hover effects so i can hover over each one and it'll it'll do something funky and i'll show you guys how to do that when we jump right in to the actual tool itself but it's super easy to create and you know basically for my web designer friends out there this really expands your horizons because now you can easily create things like this right or things like this and make it move exactly like this for things like this so a world of opportunity opens up so before we jump into the tool i do want to show you guys some examples just to get you excited right um but anyway so like obviously we have the the scenes here on the actual spline website at the top of the in the bottom but we also have actually i want to show this one so there's this one this is my personal website a personal website i've been working on uh just for fun built-in web flow by the way um check out the webflow master class anyways enough promotion so this is this is a personal website if you scroll to the bottom pretty animations if you scroll to the bottom i included this cool little 3d scene with spline so you get to the end of the web page and it says you've reached the end board have fun playing with these shapes and so they can essentially you know drag this around play with it i thought it was a cool little addition right so and this took me literally just 20 minutes to create you know put it behind this cool frosted glass and i think it looks pretty neat and the last example so i think the spline team actually created this and i believe this is the uh discord mascot i think it's called the wampus i don't know i'm not sure but i'm pretty sure the swine team created this and again you can play around with it and what's cool is you know it looks really neat but it's also very easy to create it's just a bunch of cubes and cylinders and that's about it you can see the eyes are blinking um and you may think oh how the hell they do that but it's actually really easy with spline so you know i'll show you guys um how to do animations and stuff in a bit and i think that's all the examples let's jump right into uh spline itself so very reminiscent very familiar of something to something like figma right you have the left hand uh panel here with the layers when you create a new file you it starts with this rectangle and really if if you rotate around you'll notice that it's not just a rectangle it's actually a plane right because we are in 3d space right and so at the very top here you have your shapes so let's get rid of this plane and we'll add in let's say a cube right and this may just look like a regular old rectangle but if we rotate around you'll see that it's actually right it's actually a cube click on the plus sign you've got a few a few other shapes cylinders pyramids taurus all kinds of stuff and then what's really neat once again about spline is you're not rendering anything so what you see is what you get if i click on this play sign play symbol you'll see that you know right away um it's previewed as is you don't have to wait for it to render which is really neat so let's move on to the right hand panel here you have at the very top the uh the background color this is essentially the environment color so we can we can change that to whatever we want so white if we want to completely scorch our eyes and then the camera settings environment so this is where you'll adjust your lighting right we can change the light intensity we can mess with the actual overall ambient lighting and we can enable or disable shadows really cool stuff fog so turn on fog and then pretty cool right i don't know when you'd use this but anyway let's get rid of the fog and at the very bottom just like on something like figma you can export and this is where the magic happens because and where spline really differentiates differentiates itself because you have so many there's so many ways of exporting so i can export a public link and so what this will allow me to do is it'll provide me with a public url that i can copy and and and i'll give it to anybody they could throw it in their browser and they'll see they're basically going to see this and they can immediately you know start playing around with it and see what you're creating and that's absolutely awesome another thing you can do is if you export with public url selected here you can embed so they give you the iframe code and so if you're using something like figma this is super easy to implement and that's actually what i did for my personal website that i showed you guys earlier um and then you also have a ton of other options so web content this will generate the actual code html js etc and you can export as an image export as a video and right under you have you can actually enable or disable a few things so let's say i share this with someone and i don't want them to be able to rotate right i don't want them to be able to rotate or play with it so i can just disable rotate i find that pretty neat as well um so that's that let's move on to the so the right hand panel changes when you select an object and at the very top you're just under camera here you have states and this is how this is basically how you're going to be animating and what i really love about this is how similar it is to something like figma or not figma webflow so if you've used webflow you'll notice this is actually quite similar so you have a base state this is our base state and we can create a state one and for that state one we'll create an event so state one upon mouse hover so when i hover over the the cube i want this to let's say i want this to rotate this way and i want it to i want the transition to be a spring okay and yeah let's see let's see what that looks like let's press preview here if i hover over cool if i hover over it does this cool little spring rotation really neat now so let's get rid of that so as you can see super easy to animate right so you can imagine you can do some pretty crazy stuff and right under states states and events here you have let's actually get rid of this event and so right under there you know align distribute you have your position scale rotation your shape properties and i actually think this is one of the most important things is corner corner radius so you can soften up the corners and this is extremely important because this is what makes it sort of look more realistic because i mean imperf perfect corners perfect edges that just doesn't look too bad it doesn't look too good because it's not realistic so this is super cool and super easy to implement and then right under there you have material uh and your few options here here i have phone selected if you want it to look a little bit more photo realistic you can select physical so you can see you know it's changed the lighting slash texture ever so slightly and you can uh modify the roughness make it more rough smoother pretty neat change the color to i don't know it's green and then under there you have the cloner which as the name suggests allows you to clone the element pretty cool now under under that there's visibility you can look at what the wireframe looks like flat sides not super important and you have control over the shadows pretty anyway so that's the interface in a nutshell so before i create something uh with spline here i do want to give a quick tip and this saves me a lot of time so if you're going to try out spline i would first create the scene so add in the shapes create the entire scene add in everything uh that needs to be added in and then worry about colors so add in your colors after you've kind of created uh the scene and then worry about materials and finally in the end you can worry about like lighting not sure if this is you know the official way of going about it but this has worked for me um so if you are going to try spline this will help sort of orient you for your first few creations all right so now let's jump into a bit of a speed run let's see what we can make here [Music] all right guys so we're done with the with the speed run this is what i created um it's essentially a bear head with the flux brand colors our purple and pink and i think it came out pretty uh pretty cool pretty nice and it's essentially just maybe two or three shapes it's a bunch of spheres a bunch of deformed spheres and maybe one cylinder and a few tauruses so super simple and i discovered this cool new um lighting slash material effect called fresnel fresno i think that's how you say it not sure but i don't know if you can tell on the pink here there's this odd almost looks like some sort of frost or something anyways i think it looks really neat um also added some animations using the um the state states functionality um that i was telling you guys about earlier that's that's similar to webflow so if we hit preview first of all you'll notice i had i have him blinking intermittently so you can see the eyes blinking every two seconds and if you hover over he goes from angry so he's angry and then he's happy and the ears leave his head which is anatomically impossible but it is what it is i think it looks pretty cool um but yeah that's that that's spline let me know uh what you guys thought i hope this was informative give spline a shot link will be in the description if you like the video like the video leave a comment let me know how i did on my first video i'd really appreciate any kind of feedback and yeah go try out spline go create have fun with it and i'll see you guys in the next video peace