How To Create 3D Website Designs With Webflow and Spline

well guys webflow has absolutely changed the game when it comes to 3D websites you no longer need to be a genius to pull these SES off in this video I'm going to show you how I created something as simple as this site with this very cool hovering animation and the scroll animation so we're going to take a look at how we can accomplish this using the new spline feature now if you dive into spline with a completely free account you have all of these elements inside of the library now I picked this weird bubble to go off and create my own scene here but I've also dived into it before so spline is a little bit more natural to me just because of my background with 3D design so I'm a little bit more aware of what these things are but if you're not familiar with it no need to fear because it's quite a simple program to learn and be decently good at it without mastering it right so the first thing that we're going to take a look at here just by loading this in is that there's all of these different elements here on the left side and these are our layers if we want to think about it as our layers but these are basically our different objects that that we have inside of the scene okay and on the right side we have the same thing with the actual scene itself so we have the light the play camera the background color things like that so here we can go ahead and just change the color to be whatever we want but in this case we're not going to need one because if we take a look at our example here this can also be exported without any backgrounds which is absolutely mindblowing okay let's take a look at the object itself here is this just this weird shape but it's got a point light here it's got this directional lighting as well so if you go into export take a look at the play settings we can see that there's a few different things that we need to toggle to get this kind of effect okay number one is going to be to get rid of the logo if you have a premium account but that's not really necessary right now maybe later we also want to get rid of the background color okay that's what's going to allow us to get this kind of PNG feeling we also can enable or disable page scroll I think right now I have it disabled so you can't scroll over this and then move the whole page which is fine cursor as well is going to be default orbit no no no no okay and then here comes the cool part okay this is going to be the important part let me see if I can find it here okay so on Mouse effects or Mouse events we have Global or local canvas it's going to be on local by default but if you switch it to Global it's going to allow you to be able to interact with the object on the entire canvas so the entire page now becomes your canvas and you can move this 3D object around which is incredible all right once you are done with your scene kind of editing however you want it you go ahead and click this link right here and you can paste it inside of the new webflow layout UI system that they've got going on okay you just paste it in here you create a new spline scene so you type in spline command K to bring this little window up type in spline and then you can drop in your url right there so what I've done in this case I mean this would work by itself without even touching any of the interactions that is something incredible just to begin with if you have a physical product and you can manipulate it on a website already incredible but we went ahead and took it one level further just one level a little bit further with this little interaction on scroll here now you will notice this bottom interaction here doesn't have the scroll feature and that is because we haven't applied it to that spline as well so let's take a look at how we did this in the first case so I'm going to click on spline go into interactions and as a page trigger we have this scroll animation so we can edit that we can see what we have going on here okay this when I saw this absolutely phenomenal from the web flow team okay so we can add a new scroll animation and add spline as an integration and then when we add that we can then select all of the different objects in the scene we can select Which object we want to manipulate imagine if we had a massive scene with a ton of different interactions and and things going on like a massive movie set or something like that we can move every little thing we can do that now you know directly inside a web flow with this free spline integration so it's amazing so for this tutorial I've selected a very very simple one to get started but there's going to be a ton of more 3D tutorials coming up okay so the cube is going to be the first thing that we're going to go with here although it's not a cube it's labeled as a cube because it's just a shape right so here we can pretty much set as we would any type of interaction inside of we flow we have our default stage here so we want it to move zero pixels and then when we move want this to rotate in this direction but we can also move in this direction or whatever direction we prefer okay let's take a look here let's see live preview so we can see that it's just going to move the other way maybe we want to go a little bit faster something just like that amazing all right so now we see that when we have this type of interaction a couple things becomes available to us right so let me preview this here and we can also publish this just to see it live but what this allows us to do is really explore I mean this is a pretty simple example right but when we take a look at all the awards sites when we take a look at all the very very complicated websites that we think my B Jesus how on Earth did they manage to do this well this is a very good starting point point to to get to know these tools and start to understand how we can do this so one of the cool things I want to talk about inside of this new breakthrough that webflow has done with spline is not only this kind of integration with 3D I mean this is a pretty simple example and obviously in the tutorial we're not going to go that deep right now but I want to showcase what you can achieve with this kind of site so I haven't seen any of these just yet but we can really start to understand the power that this tool can bring us when we start to see what the real pros are doing with this kind of tools set right so the way that these animations are done are using things like Cinema 4D where you have a scene and it's kind of like after effects where you can have a timeline and you're playing around with it now we can achieve this sort of thing directly inside of web flow now we don't need to pay for after effects or Cinema 4D which is extremely expensive right we only need a free spline account or a premium spline account if you want and all these different tool sets that already come with it all these different 3D objects that's only the beginning right we can have all all these free shapes I mean these are pretty basic shapes so let me go ahead and just create a new file here and show how we can achieve these these super basic things here so here we see some of the some of the shapes that they're already giving us right but if I wanted to for example if I wanted to add this Cube and maybe lengthen it a little bit shorten it here maybe bring it a bit up in this case right maybe we can grab a sphere as well put it on top of here and then we can move it here blah blah blah let's give it a cool little blue color all right so now we can see that we we have this thing right and obviously if you're working with a 3D product and you have a an actual file you can obviously import that as well and that can be your object but if you don't and you just want to create a cool little thing like this and that's also fine right but we can see that with spline we can already achieve this this sort of interaction and we don't need to have such a a massive understanding of what this world is like now this is what it could look like if we wanted to really hire a 3D designer animator you know really go deep into that that world but here we can see that we have this this planet spinning around as we reach different checkpoints we have different products here now this is something that we could achieve if we imagine this product we directly render it inside of web flow and as you scroll that thing start to scroll and it all looks really cool and it you know that's where you can start to get with these with these animations which is something that I'm really really looking forward to Let's cck on one last one just to see some cool websites here why not while we're at it it's just fun at the end of the day all right perfect example this sort of thing where we just have objects floating around no longer a massive barrier to entry to start this kind of thing okay onclick things increase now okay this maybe but I don't know I still think you can import a scene and use your scroll trigger to move through that scene now whether it's going to load easily is a different question but I do think that this is now more achievable if we create this same thing except on scroll we move the scene forward or backwards or whatever the case may be I think that's a little bit more achievable and if you guys want to see me try to build this type of Animation interaction thing leave a comment down below because I'm pretty sure we can do this kind of thing now I am seeing that it's looping so we need to see how we do that but hey if you guys want to see how I can attempt this in real time let me know down below if you guys enjoyed this kind of walkthrough breakthrough mind bending experience in webflow spline let me know down below thank you guys so much for watching and I'll see you guys on the next one

Channel: Arnau Ros

Views: 26,137

Keywords: 3d website design, 3d website, 3d website design tutorial, 3d website webflow, webflow 3d website, webflow 3d site, webflow 3d websitesite tutorial, 3d website tutorial, 3d site tutorial no code

Id: xyy7f7exVr4

Length: 8min 30sec (510 seconds)

Published: Thu Oct 12 2023