AI06: Create a 3D Website with Threejs, Spline & Midjourney

foreign hey YouTube this video we're gonna create another AI designed website it's sort of a Choose Your Own Adventure I took a few different approaches at this one so I wanted to play around with spline which is a web-based 3D editor and so the first part of the video we're actually going to create it with no code just using the spline editor tool and then export that as HTML but if you want to see me create it in 3js in the second part of the video I'd create it completely with code using 3js because I wanted to see how I would use that approach as well and then at the end of the video we'll do all that HTML CSS UI layout I'll put all the timestamps in the description so thanks for watching here's the prompt and setting to use inside mid Journey so this is spline you can access it at spline.design and we can just go ahead and import an image in here and place it into our scene [Music] and then place a sphere and position it where we want it [Music] then you can go to the material and switch from color to gradient and here you can actually set the gradient and choose the color for it you can pick any color you want but we're going to go down and choose the eyedropper to select colors out of the image [Music] then we can adjust the gradient angle to match then we can just copy and paste the sphere around and do the same thing for all the others so for these complex background shape I'm going to use the pen tool to draw a path and I'm going to click and drag these bezier handles out to get nice curves and I'm trying to trace the middle of the path then we click the button convert to path and you'll see we have this nice Extrusion now we can go down to our Extrusion settings and set the shape to be a star then we're going to bump the sides way up to like 40. and we can play around with the start and end scale values and also adjust the the size of it just trying to get it to match the image a bit closer it also has a Twist value if we can bump way up to get it nice and twisty and there's some other properties you can play with too next we want to go down to material and switch from color to noise then we can choose that material and select the colors again using the Color Picker then we can turn the scale way up and play around with the colors a bit more to try and get it to match the visuals then we can play with other material values like the lighting and the shininess and then we can mess around with the position of the lights within the scene once that's looking good we can choose export and then choose code export and in the drop down we'll select 3js then you can click download zip name your file and there we've already got our content in the 3D website so now we're going to recreate it with 3js so the first thing I'm going to do is change the version of 3js because I want to use this Library I found called mod 3 which allows us to do some cool geometry manipulation so I'm using version 110 of 3js because it seems to work better with that and then I'm just going to add in the libraries that I want to use so like I said we're going to use mod 3 and then we're going to use the 3js plugin that mod 3 has which I'm just calling three and then we're going to include a small purlin noise Library as well as a plugin that I created for mod 3 that uses purlin noise so I'm going to include these all in the description through the GitHub repo so you can download them I'm also including dat you want GUI so we can manipulate some parameters live and then I'm just going to go in and clear out all the JavaScript code so now we're just going to set up a basic 3js scene all right foreign so now we're just going to create our animation Loop that calls render on animation frame and then we'll make sure to call that initially thank you so I'm going to start getting things set up just by adding a basic test Cube [Music] [Music] foreign I forgot to set the CSS height of the canvas element which is why things are kind of offset [Music] [Music] so now we're going to create our custom shape which is really going to be a star with 100 points to it and we're going to extrude this later so really we just need to create a circle that has an alternating radius between the inner radius of the star in the outer radius foreign [Music] [Music] so to see it we just need to replace it with shape geometry and we'll need to rotate it so that you can actually see it so it's not just flat so the next thing we need to do is extrude the shape so we're going to use our extrude settings which are going to set the steps and the depth of our Extrusion as well as other parameters foreign we're also setting an extrude path which are just some points along what we want the Extrusion to occur so kind of a curved shape that we're making with it [Music] thank you then we replace our shape geometry with our extrude geometry and we should see our shape foreign material with a mesh physical material and this will give us a lot more control over how it actually looks foreign I'm also using a texture that I want to load for the map the texture map that we're going to use on this material and we're going to make sure that this repeats so because we want it to kind of scale and move over time so we're going to set repeat wrapping and then let me just add the map it's not showing up here because I didn't add any lights yet so let's add our ambient light there we go now we just need to adjust the scaling of that texture [Music] now we can just set a Delta variable and increment it in our animation Loop and use that to adjust the X and Y offset of our texture thank you foreign [Music] foreign so here's where I want to use mod 3 to actually distort our shape so the way that this works is you actually create a modifier stack and then you add these different modifiers to it and it includes a few modifiers and then I created one that we're going to use as well so we'll create our modifier stack and then we pass in the library that we're using remember we had to add the 3js plug-in that goes along with it and we specify the object that we're applying the modifier to [Music] so the first modifier we're going to use is a taper and this is going to have it sort of fade off or taper and shrink in one specific Direction on axis [Music] so this is causing it to taper along the z-axis [Music] then we add the modifier to the stack and then we need to apply the stack and now you can see it tapers off we're going to add another taper that actually makes it wider on the other end [Music] [Music] foreign modifier that twists [Music] [Music] foreign we're going to do is a noise modifier that I sort of customized and takes a noise input like a 2d purlin noise input and this is going to allow us to distort our mesh over time so it takes in a noise function so we're just gonna idle adhere to generate a 2d noise function for us [Music] oh [Music] and if we call apply on the stack inside of our animation Loop you'll see the effect it animates over time [Music] thank you [Music] [Music] foreign lights back on and you can see they're a little harsh right now but what we're gonna do is we're gonna add some fog to our scene and this will cause it to sort of the light to taper and Fade Into the distance [Music] so right now it's black but we can actually have it match the background color in our HTML and it'll blend in quite nicely [Music] foreign [Music] so that now that that's in good shape I want to add all the circles and some lights so those spheres that float around so I'm going to add a configuration file to manage these and I'm doing this because I want want to manage them using the DAT GUI Library so that we can actually manipulate it with a UI within our scene and add elements and be able to adjust their values to figure out how to position them correctly [Music] so I'm going to create a lights array and a circles array for these lights and circles that we're going to use within our scene and these are going to be used both in the UI to manipulate their values that will be populated but also with in the scene itself that will be updated in real time foreign [Music] [Music] so here we're just adding that GUI to our document [Music] foreign foreign foreign [Music] [Music] [Music] for our lights and we'll add one for our circles as well just so that we can open and close those to keep our UI organized [Music] thank you foreign [Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] foreign so here I'm just creating a button that's going to add a new sphere or Circle each time you click it so that we can dynamically add them and play around with their values [Music] [Music] foreign [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] thank you foreign [Music] [Music] [Music] [Music] so here we're just adding all the properties for each circle within the UI so [Music] [Music] [Music] [Music] thank you [Music] [Music] foreign [Music] [Music] foreign [Music] we're gonna go through each circle in the array and if it already exists like if there's a mesh for it then we're just going to update its attributes but if it doesn't exist then we're going to create a new one [Music] [Music] thank you [Music] foreign [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] so let's try it out foreign so clicking it adds a sphere I can't see it yet but if we bump up the radius there it is and then we can adjust its position s to be able to adjust all the parameters of this circle so this is helpful because it allows us to play around with these values in real time and add circles and position them and figure out where in the scene exactly so then we can just go through and all our difference here is to our scene foreign so next we can go through for lights and do the exact same thing we did for our spheres [Music] [Music] thank you [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] foreign [Music] [Music] [Music] thank you foreign [Music] [Music] foreign [Music] foreign [Music] [Music] foreign [Music] [Music] foreign foreign [Music] foreign [Music] thank you [Music] the key difference for lights is that we're gonna add the helpers so that we can actually see where the lights are when they're on the scene to make it easier to manipulate them [Music] [Music] [Music] [Music] [Music] thank you [Music] foreign [Music] so one last thing we can do is add Shadows for your scene so by causing the lights to cast shadows in the meshes within our scene to receive Shadows you can see how that impacts the visual effect of our of our scene in the lights thank you [Music] [Music] thank you [Music] [Music] thank you [Music] foreign [Music] thank you [Music] [Music] foreign [Music] [Music] foreign [Music] so here we're just gonna build out the CSS and the markup to create the UI elements that sit on top of this interface [Music] [Music] [Music] thank you [Music] [Music] foreign [Music] [Music] foreign foreign [Music] foreign foreign [Music] [Music] foreign foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] [Music] foreign [Music] [Music] foreign [Music] foreign thank you [Music] foreign [Music] thank you [Music] thank you foreign foreign [Music] [Music] foreign [Music] [Music] foreign [Music] foreign foreign [Music] foreign thanks for thanks for making it all the way through um this really wasn't a comparison between like spline and 3js because spine is really just a tool that outputs 3.js and I I think there's a lot of potential there for like building things in spline and then manipulating them and editing them in 3js I think there are some really cool workflow potentials there I just kind of want to show the two different approaches and you could easily take the output that we got from spline and then apply something like mod 3 or like you know some of the other effects we did within 3js to that scene as well so just fun stuff thanks for checking it out

Channel: CJ Gammon

Views: 127,010

Keywords:

Id: 3jgAcUKTyKw

Length: 68min 4sec (4084 seconds)

Published: Sun Apr 02 2023