Create Animated 3D Website with Spline and Next.js

hello and in this video you learn to create this awesome website using spline and nextjs let's also access stter course to spline and 3D modeling in general as you'll be creating all these 3D models from scratch and so without further Ado let's begin so first thing we can do go to our browser and go to spline does as you can see they alreadying 3D model on their front page let's click get started and create wait a new file let's wait for this to load and we won't select any templates let's just click off so here we have a space doesn't really look like 3D however by pressing alt and dragging as you can see this is a rectangle in a 3D space Also pressing space and dragging you can move around let's delete this rectangle go to the plus and create a new Cube and place it somewhere in the center as you can see we can change its size by pressing shift and dragging to keep its proportions we can move it up or down or in any Dimension by using these arrows and so let's define its position first of all with these numbers as I already know which one we need so 0 60 and 0 like this we might change this later on also let's make this toall I'm pressing alt and dragging to expand both sides at the same time as you can see we can also Define the sides to make it more wide to be thinner on this axis as well next we can simply use these numbers to get an exact size for this shape so 250 400 and 40 be quite thin on the z-axis and so this how it looks looks right now more like an actual portal next we can do is Select this once again and make it four instead of eight forers means simply how smooth it is as you can see we can drag it and change the size of it for now let's just keep it at four next we can add the material let's scroll down and choose the color for us it will be the slight blue you can either choose it with this color selector or type in the color manually it really doesn't matter what you choose Al to the right of here we have the selection of the opacity of this color next let's this plus to add a mat cap a mat cap is part of the element that changes its reflective properties and also its color properties let's find it and click mat cap there a lots of different types we'll choose this second one which makes it black for now but don't worry click this element and choose how we wanted to mix with our other elements three works the best in this particular example let's click plus once again and this time it will be an image now uh we'll choose these textures as an image in particular this one however it won't be used as an image itself we can even hide it the reason we're doing this is because we want it to be a texture for entire element so as you can see we've hidden it next we can go to lighting and make this actually 15 60 and select the bump map which will be this exact image and now as you can see this element already has a texture making it look much more realistic but it seems a little too rough so we can change the intensity to say two to make it not stick out as much and as you can see this already looks great also let's go to an area I've mentioned before to the opacity we can also select it over here it won't make much of a difference right now but it will later on let's make it 17 next let's make this glass and let's move it to the very bottom so as you can see here we have some glass and it already looks very different simply by adding it we'll stick it with normal change the blur to 36 thickness to two and the refraction of 1.25 and as you can see this is how it looks now adding this glossy surface and making it look more realistic and interact more with the world around it next let's another element there's quite a lot of materials in here and this will be rainbow let's move it down here down below the lighting and if we move around it's quite bright right now Mak it look completely white but we will change this first of all let's go outside go to effects and make it 3 2% of noise and make it visible it's a very subtle difference but still needed Also let's make the background color of the entire page black next let the floor under the portal which is called a plane let's put it right under the shape although we willing to change the y axis later on anyways but still Also let's change the size of it to become much bigger with the size of 4,000 by 4,000 as we to cover essentially the entire view of the person also CH the Y AIS for the full portal to be visible might change its position later on slightly but not now also let's change the position to three and three to make it more centered and change the camera to perspective now we no longer have this glossy view from the rainbow and looks more like an actual portal or for now some glass structure now let's make the floor actually look like a floor not some random rectangle add a new element which will be an image the principle will be very similar to what we did with the portal only this time we'll upload our own image which is simply an image of some tiles which generated with AI in my case I use major space so as you can see here's the website but you can use whichever I you want and you can use the image I provided in the description down below as a reference next we can scroll down here and change its scale let's say 0.2 and 0.2 for there to be more tiles visible on the floor next let's add another plus rather change this image to an opacity of 10 add a new elements change the lighting and the bump map to this image to make it look more realistic and we clear the intesity as is next we going uncomment this color and make it a dark blue I'll simply paste in the color for simpl sake and make it green make it not cover the entire element next let's change this color to pitch black making it a dark bluish or even grayish at this point if we change the opacity even lower and let's make the opacity an exact number 44 we can continue by adding yet another element which will be glass I believe and yes let's move it down and create the glass element it will be very similar to what we did with the portal only here we'll only need to change the blur to 17 a very minor difference so also move this color down bring the colors together and the image and Lighting on the top next element will be depth and new element for us and that's basically lighting around a certain object an year of zero making start at the very center and a far of 650 but for now it's simply a white light not what we need and so to change this let's first of all change this color from white to a very dark color and change the opacity to 50% to make the tiles actually visible to us now we can actually move this depth slightly Down Under the lighting and add a new depth depth we'll actually have two of them let's find where it is depth and make this one different first of all it will have a near once again of zero but the far would will be much larger of a th000 covering a huge area and let's change its color and make it slight errors here but simply make it black yeah just select it with the curl sect that's that's just faster and make the opacity of 0% and this will make the tiles more visible quite a strange thing but it works as you can see you can also move these depths up or down or wherever you really want and so as you can see this is really coming together can go out of the plane we might make a few small changes later but for now this is it and select the portal and change the intensity of the bump map to one to make it stick out less and yeah this looks much better now let's create a new Cube this will be the inside of our portal to make a glow from the inside oh and I just noticed we're actually slightly inside of the plane let's move it up with this arrow and let's now shape this Cube to the main portal the shap will very similar to Side 240 432 so slightly smaller on some axis now let's positioning it inside of our main portal by the way to select the correct angle we can use these dots over here do not have to mess around with alt and dragging around so this looks good more or less also move it to the side and this does look decent and let's actually shape it first of all we can add a new element which will be an outline let's find it and here it is so basically it'll have no inside simply an outline Also let's copy this color and make the outline the same color as also remove this color make the outline the same color as the main portal and let's change it slightly and move it down as you can see this element that looks much more 3D by the way we can also change this Contour but we won't be doing it in this particular project change the width of the outline to 8.5 make it much thicker a threshold of 0.8 and a slight smoothing of 0.6 also the type will be inside now it's glowing from the inside but slightly sticking out so for this what we can do is use this Arrow to move it down and this looks much better next what we can do is change this lighting to zero making it completely invisible and removing this color completely and this will actually be some depth let's select it select depth and customize it as usual we can use this color actually red color but at 0% it will simply emit a slight glow and so this does look awesome Also let's slightly change the depth from 200 to 300 I believe it will look better yeah let's make it 300 and I believe the portal itself is done the only thing we need to add to it is the animations and actually add it to the project to the next GS project and by the way if you enjoying the video so far please like And subscribe thank you and also I wasn't too form with a TI layout so I decided to change it size I went to the image first made it 0.5 then settled on 0.4 I believe this does look better but it's really up to you this part you can change however you like next we can begin with animation which is simpler than you might have thought first of all you can do this by pressing click and shifting on the next object and press contrl G to group them to make them one single element Also let's figure out in proper y AIS for this element ments and select the group can scroll up to States and add to new ones first of all base State base state will actually be small square almost invisible and we'll do just that let's make the axis very small as you can see we need to make it barely barely visible so I made it like this and messed around slightly with the values as I wasn't too sure which ones I should choose and let's move it down to the very bottom of the plane next let's go up to the first state and make it much wider make it look like the beginnings of an actual portal as you can see this looks quite decent once again messing around with some of the values yeah here it is and I believe this does look decent also change the base State as well and state two will be the full portal so simply one one and one let's move it to its proper place on the Y AIS as you can see the states are base state state and state two and now let's actually add all of these to the project first of all let's add some events to make these animations actually happen one after the other personal base state to state and to state two this is the time that takes between animations and these are types of animations Also let's make it an infinite Loop to make it Loop forever now let's go through the usual process of creating an xjs app open Visual Studio code go to your desktop open it once again and go to non full screen view create a new folder on your desktop which will call 3D portal Call It Whatever You Like with don't use capital letters as nextjs won't allow it next drag it drop it into your Visual Studio code go back to your browser open the official njs website and copy this command open your terminal and go into full screen mode paste in the command that do slash and press enter it might ask you to install next nextjs version which you should do so in this case simply press y and press enter for all these questions they already optimized for you then press later and wait for everything to install once that's done you can go back to spline go to the export and select code export there you can choose react and let's copy this line with the spline component and Link we can go back to our app go to the app folder go to page. TSX we visual glitch and remove everything inside of the return statement in there we can add our own Main and past in the spine component over here but now we need to import it so let's copy the name of this library and install it go to the terminal and run mpm install M spline tool / react D spline next let's go to global. CSS and remove everything but these three lines at the top which allows to use Tailwind CSS go back here import this plan component spell it correctly and this should be working now let's run in PM runev run app in Local Host once L is ready control click onto it and in a few seconds everything should a load how we get there because we didn't put use client at the top this Library uses user F in the background which doesn't allow us to use this in a server component and so as you can see now it actually works although something really weird is happening with the animation so let's fix that so it seems that everything is in the correct place but for some reason I believe State appears at the very start very strange didn't really see anything like this before one issue could be that we're using some wrong version so you can use draft instead of the main code export that could also be the case let's copy this draft go back here past the draft into here and reload the page this most likely won't fix it but you still should know that you can do this yes nothing changed well I believe let's go back perhaps something is wrong with the events so let's go back to the events of the group go to events and see what's happening over here what we could do is add state two after 5 Seconds St one so basically it's an infinite Loop that opens and closes the portal up the code export and the reload and opens well nothing changed that's weird oh yes because we're still using the draft inside of our main code let's copy this link from the code export past it in here and reload the page and as you can see it opens normally and in a few seconds it should close and yes everything works perfectly exactly as we want and also if we go back to the app it allows the user to pan around which we don't want as we need 3D model to be static and the only animation should be the animation with our states so we should fix that first of all let's fix this red backside for this we can simply well move this Cube more inside it's correctly that was an error we made previously and now it looks good nothing is sticking out for menu and let's go to export and play settings here as you can see we have these options orbit pan zoom and soft orbit and simply press no on all of them this will make the picture static so if we reload it user shouldn't be able to do anything and as you can see everything is static and the user can't do anything which is exactly what we need Also let's change the camera view export up the code export and reload it as I believe this looks too much from the side and well this does look look better and back in spline I believe we are done with this group and now let's add some new text add it somewhere on the plane really doesn't matter exactly where example over here will still be fixing the position first of all the content will be time is an illusion or whichever takes you like really doesn't matter and now let's fix its position first things first let's move it up and change its rotation like this by dragging on these curves and this looks better now we should make it bigger first of all the font size we can move up to we'll say 50 for now and expand this text box for the text to actually fit and let's make it f size completely 100 this does look better but perhaps it's not big enough so we can manually increase this to 120 and this looks better however if we plan it around as you can see it's actually quite massive bigland it seemed from another angle so let's make it smaller move it to the portal and shrink the text box for to fit into two lines instead of one now this does look better I believe next let's select it once again slightly rotate it over here we have the font but first of all it's extruded extruding it makes it look 3D as you can see now it has this 3D feel to it next let's choose the forms there's a huge amount of good fonts over here and some of the more interesting ones are Rubik as you can see there's a lots of different variants of the Rubik fonts which are quite interesting so you can play around with the fonts choose whichever one you like and there's a massive amount over here I personally like this one for this particular project but once again you can choose whichever you like next let's cck convert to shape to make each individual letter a different shape this will allow us to select the material for this text let's add a new material and make it an image the usual process of adding a texture we can either upload it or select one of these ones so let's choose one of them for example this and I believe this should be good go to the lighting the bump map and make it image 4 this makes text look more 3D and have an natural text texture to it next let's s the color and make the same color as the portal text already looks great also change its opacity make it less bright and I believe some more over here should be good now let's go out of here move the text up to make it look better on the page and make the text slightly smaller something like this and click export and update code export to see how it looks in the actual app let's go to the Local Host reload it and a few seconds we should get the ready text and yes this looks great now let's fix it little and add a camera to make everything look better on an actual web page as for now it's a little too located too much to the left now after accidentally adding a rectangle let's move it to the left rotate it move it even more to the left like this select this text change its position to make it more to the left and higher up and I believe this looks good next we can add the animation for the text by adding two more States and selecting the base State and moving it behind the portal so the will be as if text is coming out of the portal and so let's shrink it down what we could do is actually simply make the scale zero to 0o 0o and zero like this that states making it larger perhaps 0.5 something like this and 0.5 and let's move this text to make it behind the portal but first of all yes let's move it behind the portal like this we might change the exact location later on but for now this will do and for the state two this will be one one and one so the full size which we created before and let's move it to the previous location which was somewhere over here let's move slightly to top as well next let's go back to the state and yeah this does look good for now and let's choose the events the transition first of all we'll start with base State as usual go to State and this should happen after 2 seconds first of all base state to base State then to State then to state two so it doesn't appear straight away otherwise it will ruin the whole portal animation let's cck update code export and go to drafts and copy the latest draft as I was getting some errors I couldn't actually update the app properly let's paste the link over here go back here reload it and this does look pretty good not exactly what we want as it's still slightly poking out from the portal but it is a good start let's go back to spline select the text select state and let's move this location around slightly so move it right over here export update code export on my device I need to constantly add new drafts on your device everything might be working fine this is just n that happens sometimes and I not try to fix it properly because I'm not too experienced with spine and so let's reload this and see if this did fix the small issue and pretty much yeah this does look better and now let's s the camera and add the finishing touches so let's syn a bit with the location s the state of state two rotate a bit so just make it look quite natural and good on a web device update code export once again do the usual thing with the drafts you might not have to do anything with the drafts or you might update normally so let's reload this see how this looks with the new view and yes exactly what we need Also let's go back the text once again and move it to the left and to the top the same thing with the drafts reload it and this does look better also let's quickly go back to our Visual Studio code go to the main add a class name of bg-- 900 also the final thing we need to do is select the portal and change the animation in the events we can actually remove half of the events so state to state and Bas at end should be removed and we change the loop from infinite To None making the portal only open once and let's update the code exports Also let's go back to the main and add w- screen and and h- screen to the class name and so here we are the final finished project the portal opens and the text moves out of it exactly as we want So yeah thank you guys for watching if you enjoyed the video please like And subscribe thank you

Channel: WebChain Dev

Views: 2,621

Keywords: 3d, react, react.js, next js, 3d modeling, 3d modeling react, spline, spline tutorial, spline 3d, spline tutorial for beginners, spline tutorial 3d, next.js, next.js 14, next.js 13, next js tutorial, web development, three.js, web dev, webchain dev, animation, tailwind css, react animation, framer motion

Id: U6TWaCJVHJw

Length: 29min 17sec (1757 seconds)

Published: Thu Mar 07 2024