Creating Custom 3D Objects for use with Three.js

Key Takeaways

today I'm going to show you how to use vector E to create your own custom 3d objects to be used with three J s before we begin to win to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my 3d tutorial but you could watch all of these 3d courses at Skillshare he'll share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube and you get the first two months 100% free so join up everyone what's up Gary Simon of course satchel com so today we're going to be covering both vector E and also 3j s now separately throughout different videos of this channel recently I've covered both of these things independently of each other but I decided to be cool in the cases where you would want to be able to create your own 3d objects but also be able to use them on the web using three js2 like perhaps your user interface projects I you want to be able to use them in the browser and animate them I thought it'd be cool to go ahead and cover that workflow as it's done now I would also recommend if you haven't touched either of these things to check out my previous videos where I kind of do a real quick crack crash course on both of them alright so just to show you again what we're going to do I I'm gonna refresh this we have an intro interesting animation that kind of kind of loads up it's kind of like a loading graphic and we're gonna create all this from scratch first the 3d objects and then we're gonna import them using 3GS alright so let's get started alright so here I am at vector e-comm within my account and the first thing we're going to do is under primitives where we can just create a bunch of simple shapes we're going to first have I like to see in a shadow we're not necessarily going to see this once it's in 3j s and the browser but I like putting a shadow plane anyhow and we really don't have to do any modifications to it we'll just leave it as is next we'll go ahead and we're going to add for our centerpiece just to keep things real simple although it's a cool shape is a poly he drawn or polyhedron or whatever under subdivisions over here in the properties panel we're gonna put 0 for subdivisions there you go and so we have this cool interesting little shape here you can left-click right by the way to rotate the camera view you can also zoom up with your scroll wheel hold space bar left click and drag to pan all right so for this we're not going to mess with materials just yet I want to add the sort of the glass panel set hook around this so we'll choose a box alright and so we have these options here to make adjustments to the scale and position and such these little boxes if we come here to the inner side or the outer box right here we can make it real thin kind of like a glass panel of sorts and we'll just position it right around there I want to take this and we're going to scale it down so we'll to choose the inner option to scale this down a fair amount I think we come to like a side view right here position it right near the center and also I do want to make this less like a square so we'll go ahead and take the outer so it's more like a panel alright that's pretty good right there alright so what's really cool about this I'm instead of just replicating duplicating this with control D and trying to position it around there so much easier way and we can come over here hover over the generate option and we could do array radial look at that alright very cool so there are properties that we can adjust here on the side so we have a count 5 I like 5 by default already you can experiment with these other settings like for instance radius was at a hundred but 54 it gets it closer together so I kind of like that in fact I'm like I'm happy with everything as is so there's no other adjustments that gonna make I wanted the modeling part to be quicker victories much more capable of allowing you to create custom objects and just you can do so much is very cool I'm gonna do another tutorial in the future just about the modeling aspect once I myself become better at that part so now we'll worry about textures because we can export the textures as are the materials as well I as well as the 3d objects the materials are as MTL files that three Jas can use as well so let's come over here to library and over here is the materials tab and now we can apply materials to this so let's focus on our polyhedron sort of interesting shape first and we could just die maybe we want this to be a little bit more metallic I think I like that and we can go back here to object for instance and for our material we have more options down here where we can change let me make sure that you guys can see this I want to make sure I'm not over the important stuff so I like roughness metalness reflectivity you can really increase all of these or just play around based on how you want this thing to look and react I think I'll leave mine right there all right now when it comes to glass though let's go back to library we could type in glass here and you have like four textures they give you hit Enter where material is rather so if we choose glass it's not going to work because this is a group so I'm gonna select up first what we're gonna do I forgot about this part we're going to come back here and convert to geometry alright so now we have all of our baked materials in here before it's kind of like the same thing like Photoshop for instance if you have a smart object layer you can't make certain changes to it so you basically rasterizing it this is the same thing here so what we'll do here is once we have them all we can now let's go over to our library tab once again and I'll double click into the group to select each one so hold shift while doing that and then apply the glass material alright so by the way if you wanted to see kind of what this looks like you go to the render and you can choose like a medium for instance there you go it's not going to look like that in the browser although it'll look you can get to look pretty close I so when it comes to 3GS in glass it's not going to have certain characteristics as it does in vector E so one thing that we definitely will need to do is to create the transparency of glass within three j/s we need to change the opacity so we come down maybe to like 30 percent all right and trust me I because I did experiment with this this will work better for you when it comes to the part where you get it into 3GS otherwise you won't be able to see behind the glass panels if you have that opacity up at a hundred percent so you could experiment with the other values here if you wish but right now I'm pretty cool with this right here okay so now at this point we can come under here under export and you can see by the way you need to have the full option of vector e as I mentioned at the beginning of this video in order to gain access for the ability to export your objects here one thing I was unsure of and I couldn't find is if it would export you know all of your objects as separate objects what I found is if I tried to export this as is it would export both this and this in the same object file and I needed them to be two separate object files also before you export this polyhedron you want to make to click convert to geometry under the object tab with it selected and I'll give it a color right around here that looks good to me and then we can go ahead and export the object so what I decided to do is first I just delete this hit this and choose to exercise original size texture quality hundred percent download object it'll download a zip all right then undo which is ctrl Z and then just reverse that so sorry we'll take this and then just hit download object once again now we have our materials an object specific to each of the two models that we have that we want to use or there are objects essentially so now it's just a matter of opening these up and we're gonna place them into a new folder for our project alright and you can see I this is the first prize zip file that we downloaded which which is just the polyhedron sin the central shape that we had I'm gonna drag it over to a new folder here called a vector III j/s and you just want to rename these we'll call this what we call this we'll call this I'll call it Center as in the centerpiece so these are just the material file and the object file for that polyhedron so then we'll do the same thing here with our other get out here and we will mean this will call this glass I guess make it obvious all right awesome so let's exit out of here and now we're done here with vector e and now we'll go ahead and load up I owed editor which I'm using Visual Studio code which is a free code editor from Microsoft and we'll go ahead and open up a folder our here we go our vector e3 Jas file all right or for two rather so let's create a new file called index.html hit exclamation point enter for a quick boilerplate right there we'll link up a real quick CSS file although it's going to be very minimal I mean let's put it in a folder CSS means CSS I'm not even going to use sass as well just gonna get this going as fast as possible a new folder with main CSS inside of it and I'm only going to paste in the rule sets in it there's only a couple of them really this is it so we're set in the body with the default margin of 0 the height 100 of you port height and the canvas is just display:block we'll save it and then we'll go ahead and we're gonna import all the necessary JavaScript files I for this to work we're just going to use CDN and also straight-up JavaScript files for a couple of the other things which I'll describe to you in a second so the CB n here I'm gonna hit ctrl B to get rid of the sidebar just momentarily this is for 3GS if you just go to type in 3j s CDN and Google you'll find those dis link right here otherwise just pause and type it out and then also we're gonna I use tween max which is from green G SAP which is the green eye green sock animation platform I've done a bunch of videos on it it's really powerful i JavaScript based animation library for your web projects and it's very cool so do is channel search if you want to learn about it I do have like a crash course on on several of the G SAP topics so this is the CDN for that so here in the middle we're gonna have to have two other JavaScript files that aren't included in this CDN for 3j s they're the object loader in the material loader and we have obviously two of those that we want to use so we probably to use CGI and node an NPM install with this in order to gain quick access to your node modules but I I'm just gonna I'm kind of lazy so right here we have the the loader section for 3j s and I'm just gonna grab the code so let's see we want the object loader where are we at okay right here obj loader dot J s if I just choose raw I'm just gonna copy that here we'll create a new file no let's put this in a JavaScript folder just for now so we'll just put in we'll call this obj dot J s paste that in and then one more time we'll come back and we'll find our yeah and we will find our material loader it's MTL loader j s there we go so we'll just name this is mt l alright save it and then we reference both of those and we'll put in our script source equals what was that J s and obj j s shift alt down arrow key and then this is what M T L thought she is awesome okay so now we have everything ready to rock so let's put script here and we'll just write our JavaScript in our HTML file all right so when it comes to using three GA s to set up your scene there's a lot of boilerplate code now I did kind of like a crash course introduction to three J s just recently you can I search my channel for that just type in 3 J s you'll find it if I can't remember to link it into this description and I I do a much better job of explaining what exactly is happening with the following code alright in this is code if you want like a full screen canvas it's going to be pretty much all the same settings with some exceptions I for almost every project that you have so a lot of this is not specific to the purpose of this tutorial which is you know learning how to import your objects and materials from 3GS but I'm going to describe it very quickly so I off the other screen my other monitor I have this code already set up with some comments so we're first going to create the 3GS scene very basic you do that for every 3GS project we're also going to create a camera you have to have and every 3gs project there are different cameras we're gonna use a perspective camera you can use like an orthographic camera which you can set up to be kind of like an isometric view if you wish we're setting the camera position Z at 25 so if you make this zero things are gonna be up a lot closer to you your 3d objects and you can experiment with all those settings as well next we're going to create a renderer you also need a renderer with every 3GS project so this is a full-screen WebGL renderer we can set the background color this is real important all these DS the hex color code is just like a grey a light gray color so you can make it black the background anything right here we're setting the render size to the actual browser or the device enter height and inner width and it makes your full screen and then we append it after that i we're going to copy this fallen code by the way this is all going to be on the github repo so you can just copy and follow along you want to make sure the project's responsive based on window resizing so when a user resizes the browser window for instance if you don't have some of this code here then or this this this add event listener for resize then the objects in your 3d scene are gonna get thrown off so this just fixes that next we need to add a light very basic 3GS stuff there's a bunch of different types of light so we're just using a point light these are some of the various settings you could change the color of the light which will change the color of your objects and just using plain white is what you're going to want to use most of the time and then we just set the position of the light and then we add it to the scene after that we're going to define a couple variables just for our two more objects essentially and then we're going to create the material so we first import the material then we add the object to the material so this right here this MTL loader comes from that MT ljs file that we imported up here so we create a new instance of it called MTL loader we load i this is going to have to change i changed - something else so we changed this here to the glass material so we'll add that first and then we call materials dot preload and then we have to next load the actual object alright so the next bit of code will help us do that alright and right here let's just close this off alright so what's happening here is we have our object loader so we create a new instance of the object loader coming from our obg a J's file and then we set the materials to this object that we then load and we name this one glass object so this is the material for the glass object and here's the object itself and then we simply add it to the scene and in a bit we will change this so that it one second there we go alright so that it will rotate it and position it appropriately appropriately in the scene for at this point with this amount of code let's go ahead and make sure everything works so far so before we get to that part there's a little bit more we have to actually call a couple other things here before we get to that point and that is this bit of code so we can see we have a renderer requestanimationframe i one thing i'm going to do is combat those out and we have to call this to add everything I to make sure everything will work so now let's um hit control B and if you right-click and open with live server or you see this go live button if you don't see that it's an extension just type in live server and the extensions panel and this is the one that you want to install it'll install it and then you just have to reload click reload and it will load your project right back up and then you have access to that option so just a quick dev server basically you can see that we don't see anything and that's because we have to I position this object so that we can actually see it based on this value right here the can position and such so I'm going to paste in this this is going to set this object which is the glass object that we created the position Z which is the depth to 372 minus 3 so you can see how we added that here and object rotation I'm also rotating the X here as well so if we save that this should update and we can now see it in the center all right great so now all we have to do here is in this next section all right so we're just gonna copy from right to see here right here and then paste all right so I we're gonna change this glass here to Center MTL and obj right that right there like that all right so we'll go ahead and save that and here we go all right so I had to make an adjustment to that wasn't recorded with the position of this particular one it was showing up too small at 370 so I changed it so now with this if we want this to animate we can do that in several different ways so the first way is we can come down here where we had this these two lines commented it out so our object and our object - we can set the Z position or you could do Y or X depending on which direction you want to rotate to keep on adding point zero one if you want things to run faster to spin faster we can choose a higher value for this so if you save it we can now see oh by the way before we get to this part we actually have to define these our object in our object - right down here so right here is where we want to set our object to is going to be equal to object which we're getting this from here and then up here as well this is our object it's just equal to object right here so we'll save that and we can now see they're both spinning very very very cool all right so what about having like a more interesting animation sequence perhaps you know they scale up or do whatever you want well we can use or over here our tween max alright so to do that we're going to put in our second object where it's created I will put it right here and we create a new instance of the timeline max right here and then I'll show you one of these we can say this dot TL and what you can use either the two method or the from method and it does affect how the animation takes place we'll just say it's going to come it's going to MA animate from these values to its original values based before adding any animation at all so what we'll do is we'll say our object actually I'm in the wrong one let's copy this over here there we go the second yet there we go so we'll say our object to probably could chose a better variable name for that dot scale so if we want to scale it we add dot scale here and then for the duration we'll say two seconds and then we put in an array of values that we want to end up scaling so we can say Y will say 0 X 0 and Z will say 0 and then we can add an add an ease so we'll say Expo dot ease out and you can check out the timeline the G SAP timeline max easing documentation and it has a lot of other values that you can choose for this so I if we save it refresh we'll see that it scales from zero all right so for this next part I'm going to simply just paste in three more from commands right here so we're animating our first is the the centerpiece and then our polyhedron and then also the glass object right here you can see you can animate the position you can animate other things as well we're just doing scale and position of both of these items notice over here we have another parameter that has - equals - this is basically it you can control an offset if you don't add this these are all going to wait for each other to animate so two seconds here two seconds here but if you want them these animations to occur with each other or in parallel you can add this as well you can also add a plus to make it even have a longer delay than the default so let's go ahead and refresh this alright so as you can see the glass the glass panels right here we can say at the z-axis we put to zero so that's why that's kind of you can see it briefly at the bottom right here it's kind of white and then we it's going from that value then to its original value so that's how that works taking a look one more time all right very cool oh and by the way if you notice this a little strange thing right there it's not a flat face I was screwing around with the manipulations and vector e just for the fun of it but anyhow yeah that is it all right so hopefully you found that interesting you learned a lot let me know what you think in the comments also make sure to subscribe if you haven't yet and I'll see you soon good bye [Music] [Music]