3D Website Tutorial: Interactive Robot using Spline

Key Takeaways

on today's video we're going to create this very cool 3D website that includes this cute robot that follows your mouse and looks whatever your cursor goes we're going to do this using spline and then embed this into a web flow website if you've never used spline before I've created a crash course which you can check around here I'm going to try to keep this to a beginner's level and we're going to cover modeling the robot texturing and lightning and then adding the very cool interactions let's rock and roll so to get started I went to my friend Chad GPT which is now integrated with Dolly to create images and I asked for a robot made out of basic geometric shapes and I got this which is pretty nice and then I asked him to select one and put it on a black limbo standing on a cube uh with a kind of like dark metal and purple lighting and what we have here is basically kind of like a rectangular with round corners so to do that I'm going to go ahead and create a rectangular uh drag it out like this I think these are somewhat the right proportions now right here on the right I got corners and I'm going to use that to create these kind of like round corners by the way this is why I'm not choosing a cube I already have a cube here but then I won't be able to just make round corners on the front if I'll make round corners on the cube it will be round all over and that's not what I want I want them to be round on the front and kind of like sharp on the other uh edges so I'm doing this with a rectangular gave it some round corners now let's go ahead and extrude this a little bit it's difficult to see so I'm going to hit option and rotate the camera just a little bit so I can see how much depth it has uh I reach the limit here so I'm going to just manually do something like 200 that looks about right so now I have this kind of like cube with round corners on the front now to create the bevels I can create a little tiny bit of bevel that I can use this uh and then you can see I'm going to zoom in in by hitting option and then scrolling with my mouth now you can see I have softer EDG here but the really nice round corners here so I've got the the main thing here maybe even a little less bevel on this where's the bevel set of five let's go for three maybe okay now here you can see that it it actually looks as if there's like two uh Cube and then a cube inside of a cube so what I want to do is I want to actually create like a hole inside Cube and this is a great way to talk about Boolean which is how you remove shapes out of one another so let me show you what I mean I'm going to go ahead and duplicate this Cube that we have here hitting command D and now I actually have two of them you can see if I'm moving one of them up you can see that they're duplicate and I'm going to uh make this one a little bit smaller by hitting um option and shift while I'm making this smaller here and then you can see it makes it smaller on all edges but now I do want to make it go go out of both sides so you can see I can pull this so I basically made it and I'm going to hit option to drag it from both sides and you can see that I've kind of like made a smaller um Cube that actually goes outside no it's not going outside from here so let's see yeah now it goes out out of both sides and the reason I'm doing this is because I basically want to punch a hole with the interior Cube inside the bigger Cube so let's go to the front and see if the size is is okay I think it is I think it is so what I'm going to do is I'm actually going to for a second duplicate this Cube again because I'm going to need the inner Cube as well um I'm going to hide this for now and now let's punch out this the inner cube out of the outer Cube I'm going to do this by selecting both of them and then right here you can see Boolean modifier on the right and I can either combine them to a new shape or just the intersection but what I want to actually do is is this one which is basically remove the inner one and I clicked it and now you see that I have the combined shape which is basically a hole inside of this which is great now let's go back to the uh rectangular not rectangular actually this uh box that I've added here and what I want to do is just make this a tiny bit smaller and also we need this to be probably the same same size as this I think maybe let's bring it up back up here Cube within a cube which is similar to what we have here I can actually go ahead and make holes for these two eyes in a very similar way to what we've done previously so let's go ahead and create a spheres actually create two spheres for the eyes let's say this is IE number one let's place this one around here and let's actually look at the top so I'm going to click this to look at the top because you you see what I want to do is make sure that this is here I also see that this one uh the inner the inner block is actually too big so let's make that one smaller and bring it up here so it's exactly here in the front and the eye is about halfway in and halfway out that's actually nice I'm going to rotate the camera again uh let's see about the position of the eye I think it's oh okay let's duplicate this so that we have a second eye and let's place that one here Okay so we've got the eyes I want to create the eye sockets which means I'm going to need to punch out circles that are a little bit bigger than these uh inside the inner Cube so let's go ahead and do this I'm going to duplicate this sphere make it a tiny bit bigger and then select it and the inner Cube and punch them out same way with the Boolean operator and now we've got this kind of like socket in here and you can see inside of the booing operator if I go here and just duplicate at this sphere that I have here and just move it basically duplicate a hole to create another hole and I'm just going to position it in the right place let's go to the front to see that it's accurate it's actually accurate Okay so we've got basically the head and we've got these two eyes actually here that are looking a little bit more to the center but never mind I've made it a little bit more to the top okay now we've got these ears I guess yes let's go let's just create like a ring around them uh cuz we haven't created Rings previously so let's do this by going here and creating a cylinder and I want to create a cylinder right here something like this and let's see if we can do here basically hollow out to create something like yeah something like a ring let's rotate this so that we can see what we're doing maybe make this a little bit bigger and make the ring Hollow something like this now let's look at the front now let's look at the size it's way too much outside so I can do this and actually you know what let's actually make it to go out of both sides okay not super accurate but not bad I guess it's it's okay if we want we can also create an orb here to make this but let's continue with the body right now let's say the head is pretty much okay I think I'm happy with the head you know what if I'm done with the head it's a good idea for me to actually group this thing because I want to be able to move this later around and treat this whole thing as one object so I'm going to shift select everything that we've created so far I'm going to hit command G to group them together and I'm going to call this head um head and that's going to enable me later to you know move it around and animated and stuff like this let's go ahead and create the body so for the body what I think I'm going to do do is the way I'm going to do this is I'm going to go ahead and create a cube this time let's go ahead and create the cube here something like this and for this Cube let's look at the top to see that it's you see it's not even be below the the head so let's go ahead and take it move it around here okay so now the soon to be buddy is in the right place actually below this probably move this down okay so what I want to do with this actually you know what let's hide the head just so that we can work I have this ey toggle here I'm just going to hide this for now what I want to do is I want to make this round and make the top part of it smaller so the way I'm going to do this is I'm going to use smooth and edit actually not smooth and edit that's not what I want um I'm going to remove the corners yep and and now I'm going to smoothen at it and I can give it even more level so that it's rounder but what I want to do is I want to add some edges I'm going to add an edge and use this to move the edge to the top and you'll see in a second why I want to do this something like this and I'm going to add another Edge right here and I'm going to take that one to the bottom okay so now you can see I have kind of like a sphere and you might ask yourself why didn't I create a sphere to begin with and the reason is I want to now move into selecting the points the vertexes and I'm going to select all the ones at the top and I'm going to hit when I'm holding option and shift I'm going to scale this down just a tiny bit and now you can see that you know I've created this kind of like a cone I guess which is similar to what we have here um I think this yeah I think this looks okay I think this actually is the right shape that we want so I can click out of that maybe we might want to change kind of like the proportions and basically the body is going to be basically this I'm going to duplicate it and rotate it actually exactly I want to rotate it 180° so let me undo that let's go to do the rotation from here let's try 180° on the Y AIS did that work nope that's not the axis that I wanted to rotate so let's do 180 here yep it was on the xaxis okay so I've got this and now let's change the proportions to something like this and I think this is pretty much the body that we wanted or similar to what we have here this is a little bit rounder and I can do this I can make it a bit more round if I wanted by selecting doing the editing the mash again and maybe adding another line here and scaling it yeah this one I can if I wanted to I could make it more chubby and round this way but I don't care too much about that so let's zoom in see what we've got we've got the body is all right and actually you know what if I'm looking at here it's seems like the legs are pretty similar you know actually let's duplicate this thing take it down scale it maybe make it a tiny bit taller for the leg uh let's actually look at the front Okay so we've got a leg here actually the body is too too down at this point so what I'm going to do group this call this body just because I like to be organized move this up here to connect it um Yep this is connected and this is going to be leg so let's do one and actually duplicate and move it this one here actually let's rotate on the Zed 180 this looks like a nice leg we've got this I'm going to group this call this leg duplicate it move it to the side and we pretty much have the body yeah we pretty much have nice body here now I can go ahead and create the hands too but I think you pretty much grab understand it I would do the cone here as well and here not sure just mini cones I guess I would do so let's continue by just creating the cube underneath it let's go ahead and create the cube underneath it we got a perfect Cube uh let's see that it's really underneath it like this look at the front put it right below the legs okay so this is great I think we've got the model right we would probably also need a floor uh so that we have the light here on the floor so to do that let's go ahead and create a plane create that should probably be bigger so let let me zoom out a little bit and make this bigger bigger bigger now let's put this right at the bottom here so I think we've got the model right I'm going to make this tiny bit bigger as well okay now we've got the model which is pretty nice and that was pretty fast as well now the next thing I want to do is I want to create the the head interactions just to make sure that it follows you know the cursor and you can see right now I can hit play and basically we've got this now right now we can pan out with the mouse which is not the interaction we want if we click and rotate this is what it does what we want to do is we want the head to kind of like follow our cursor and actually it's super super easy to do so here's what I'm going to do I'm going to pick the head which is already grouped the right way and I'm going to go here into events and I'm going to add a new event now you can see I've got a bunch of stuff here what I want to do is to pick an action and do the look at so this basically is already set up I can set it up you know for the cursor to follow the cursor right you can do animation where it follows the camera or other things in my case I wanted to follow the cursor not sure about these maybe we'll need to figure them out later but let's see what it does just to work to to get started as you can see it it already works it was so simple it already works and I think it looks good now I think we we can change you know how much it moves if we want but I think that for now it looks pretty cute and I like the way that it works so with that said we can now continue and work on our textures basically what I want to do is I want this whole thing to be kind of like black metal kind of thing so let's go ahead and find that texture actually I can select everything because everything is going to be the same texture and I can go here into the materials and I can look at the spline Library which includes a bunch of things actually there's one thing that I don't want and I'll change that later the eyes but let's start with metal and there's some metals here I'm not sure which one I want to pick Let's do metal lines texture one no I don't think that's what I liked maybe this silver roughness oh maybe silver roughness that's nice okay let me let me keep that for now the what I wanted to do is to select a different one for the eyes so I can go ahead into the head and look at the Spheres so this sphere we don't let's disassociate it from this silver roughness and let's go ahead and pick actually not just for that for the sphere and for this one as well for both of these let's open up the material and let's go with something uh reflective maybe I'm going to pick something random we'll we'll see if that works okay so now we've got a texture and it already starting to look better but now we really want to create this dramatic kind of like lightning that we have here so we've got few things going on here number one we've got two two different spotlights one of them is kind of like White and the other is purplish and the other thing is there's a tiny bit of glow kind of like coming out uh out of the yeah out of the light so let's see how we're going to do this first of all I'm going to zoom out just a tiny bit here and let's go ahead and create some lighting so by default we've got this directional light which you can see here but I don't want directional light is just like light in One Direction what I want here is a spotlight right it's a light that is only spotting this one area so that everything around it is actually super dark so I'm going to delete this directional light and let's go ahead and find a spotlight here okay so now you can see that I can play around with where it is so again let's zoom out a tiny bit let's go around let's actually give it a little bit of an angle and take it out I think it's if I'm looking at here it's kind of like from the top right side let's make it I don't want to take it up a little bit but maybe we need to look at from the top to understand okay maybe we need to bring it somewhere around here okay maybe this is good so you can see that right now we get a very sharp Spotlight and right here from the Light Panel we can go ahead and actually blur this out a little bit Edge blur zero I'm going to add blur that actually a lot I think maybe I'm also going to increase the intensity I don't know we'll see about that later Decay is how fast the light disappears maybe this is good maybe we need to bring this up a tiny bit to the upper side here okay and then the other one that we want to bring in is a purple light so let me duplicate this light move this one to the other side and rotate it so that we have light coming from the different direction let's actually move this out a little bit maybe we'll take it a little bit from the back do a backl something like this and change the color here of the light to something purplish I guess something like this maybe is this good I don't know it's time to it's time to find an angle that we like so let's go here let's move to perspective okay and rotate that to this angle let's zoom out a tiny bit now this is actually too much of a zoom and let's play around with this so this is I think right now maybe a little bit too dark maybe we want to bring one of these lights actually what I think I'm going to do is I'm going to add another light another Spotlight maybe that is is just going to give it like a general Point light yeah that is going to give just like a general light here at the front but it's very very small it's way smaller just like what is maybe 1.2 or something just so that we have we can see something but I don't want this light here at the on the floor cuz I want the floor to be dark I'm also thinking whether I like the perspective or this orthographic one better and I also think that we've got too much light here and maybe we need to blur them out even more so let's go ahead and blur out these edges and blur out these edges here as well I think we I want to bring the purple light tiny bit to the front one thing that you can see that I'm doing right now is I'm moving the camera a lot to kind of like find the right position for the lightning and I always want to come back to the same angle that I'm trying trying to work with so a good thing for me at this point I think would be to add another camera let's see if I can add a camera and this camera where is the camera okay I can switch between the cameras here so this camera is always going to be fixed let's fix this let's find the position that we want and the zoom that we want and yeah something like this let's play this okay one more thing is I want to get rid of this you can see that the background itself here is gray let's turn that into black so I'm going to click outside not to select anything and just change the scene background to complete Black okay and now okay now I think that this is what I wanted and it looks pretty cool but it's I think it's too dark when it's when I'm looking this way I'm looking this way it's a little bit too dark so let's let's take the point light that we have and maybe move the point light around here so that even if I'm looking this way yeah there's a tiny bit of light on my face and uh I think it looks pretty cool right now okay it looks pretty cool the only thing that we didn't do is add this kind of like a glowy effect and the way to do that again I'm going to deselect everything just to go back to my scene and I can turn in effects here and under the effects you can see that we've got this Bloom effect so I'm going to turn this on and now you can see everything got this little bit of a glowy effect I can crank that up even if I want to with the intensity I'm not sure how much I want this but let's play it around now we got this kind of like a misty vibe to it with the glow um it's actually pretty cool I'm liking this I'm liking this this looks pretty cool okay so I think with that it's time to go ahead and embed this in our website the way that I'm going to do this is I'm going to go ahead into my export settings I'm going to use the viewer because I'm going to embed it in a webflow website and just make sure that I have seen one and that I'm rendering the camera versus the personal camera which is the one that we use to move around uh I don't want a logo okay here's something that is important mouth event is you know because my interaction is tracking my mouth so if I'm going to set this as local it's going to basically only make this interaction work if I'm hovering on top of the canvas and if I'm going to do Global which is what I want then even if I'm hovering on top of other elements or outside of this spline in bed it's still going to work so I want to make sure that this is set to Global and I think that we are ready to go I'm going to hit update viewer I'm going to copy this viewer code here and I'm going to head into my web flow project and I've got a basic website here set up with a spline element inside all I have to do is go ahead and paste up this element inside and it's it's a little bit I guess to the side let me see why it happens maybe if I move this around exactly so it's 100% of the screen it actually looks pretty good right now and it also loads up and looks and follows my mouth which is pretty pretty cool so not bad for few minutes of work creating this from scratch using spline I hope you enjoyed this tutorial you can go ahead and try it on your own and if you're interested in a full-on spline course there's a weight list below let me know what you think in the comments and I'll see you in the next video peace out