 It's just gonna be a quick look at a project I've been working on that have the code up on GitHub and it's project I've been working on a lot. So it's changing a lot, it's still on its early stages. But I just wanna give you a peek at it. It's similar to what I showed you just not too long ago, how I was making a template and some functions and stuff for Phaser 2D, for designing 2D games. This will be using 3JS to create 3D interfaces in a webpage. And both those libraries, those frameworks are easy to use but I'm just trying to simplify the things I do quite often and make things a little bit quicker. And I'm incorporating a lot of VIM shortcuts that I've created so also check out my VIM page. So if you go to 3JS, if you go to GitHub, my username is MetalX1000, there's a project called 3JS template. And there you can get the source code. And there's a code, a little script in here called 3JS Git. And if you run this, which I'm about to run, it basically pulls down this project but unzips it and puts it in a folder that you name. You also, while you're at my GitHub page, check out my VIM setup, which has my VIM setup files and have a lot of shortcuts and templates in there that go along with this. So here I have a web server running, looking at a folder that does not exist but we're about to create that. So I'm gonna run a 3JS Git that's inside that repository already. So if you just pull down that script, you can run this and you give it a project name. I'm just gonna call it test. I'll hit enter, it downloads, unzips and renames the folder test. I'm already in my web directory. So now if I refresh here, I have a blank canvas. It's just all black. So now I can go into my test folder and I'm gonna start looking. So there's two main scripts in here. If I list out what's in the JS folder, you will see that there's a functions which are functions I've created that kinda you will call inside your main JS. And it's just kinda to simplify stuff. So you can look through that but let's go ahead and just work with the main JS. And by default, we run our create function which calls a function I created called setup scene. I'm gonna create a camera and move its exposition to one. I am going to set the type of camera to orbiting controls. I'm also gonna be adding in other things like fly control and maybe first person shooter later on. But right now orbits and we have limits at the false. I'll show you what that is later on. Right here, this is gonna change. This is very sloppy here. Basically, I'm just waiting a second for everything to load and then putting everything inside a list called clickable so that you can have clickable items. But this is a very sloppy way to do it. Just kinda something I did for now. Obviously, if the scene takes more than a second to load, this won't work. And then we have our animation loop which is gonna just render stuff out. So let's go ahead and add some stuff to our scene. So all I have to do is come up here and I am going to say, again, I'm using some stuff from my VimRC file here. Let's create a cube. I'll just enter and it creates this line here for us. And I'm passing it a JSON object with information in it. If you don't put anything in there, there are defaults. So for example, I could have this here. I'll save it, refresh my game here and you can see there's our cube. Again, we have the orbiting camera by default. And so if I left click or one finger touch on a touchscreen, I can rotate around the center here. If I right click, I can move the camera left and right and on a touchscreen, that would be two fingers. And to zoom in and out, I can scroll or center click and drag or on a touchscreen, it's three fingers. No, I'm sorry, two fingers is zooming in and out. Three fingers is to drag. I didn't design that. That's a script that comes with 3J, 3JS. I just made it simple to call just by saying orbit controls that automatically links all that to the camera. You know, it's normally a few lines of code. I'm just trying to shorten everything down to one line of code. But there's our cube. But at the same time, if I was to take this, I can erase all this out and you can see if I refresh, there's a cube there in the center because it loads up those defaults at the center of our scene at a size of one. But let's go ahead and do that again. I'm gonna say create a cube and I'll just move the position to one, one, one. And if I refresh now, you can see that we have two cubes. Okay, simple enough. And they are clickable. Right now, each time I click one, they are, with the last one I clicked, goes into a variable called click. Let me open my little console panel here. And it's clicked, capital, letters. There's the last item that was clicked. If I click the other one, I'm not sure which one I clicked. So you can see that the two different objects there. And, but they also have it so that when you click one, each time you click an object, it adds it to an array. But if you click it again, it removes it from the array. And you'll see how that works here in a moment. But I wanna show you a few other things before we get to that. So there we have two cubes. We can also add a cylinder very simply. Similar things. I'm gonna add some other objects in items here. Again, you can leave all this blank and we'll put in defaults or I put those there so you know what some of your options are. I can refresh that. And you actually don't see that because it's in the same position as that cube. But these functions also return the objects. So I can take like this cube here that's in the center and I can say cube equals. And then I can say, you know, later on in my script if I move it, I can say that cube position dot x equals one. And now we have that cube has moved over and our cylinder is right there. Let's go ahead and make these objects move. I'm going to go down to the bottom of my script here and I'm going to choose a function here called not rotate camera, but selected. So here is a function that will loop through all selected. Again, every time you click an item it adds it to the selected group, the array. If you click it again, it removes it. Here it's saying every time we run this function rotate every object in that array a little bit. So all we have to do is add that to our animate here. So we'll say all selected. So now when we refresh, I can click on an object, click on another object and they're all rotating. If I click on the objects again one by one they are removed from that list. Obviously you can add other functions in there and you know, say if this type of item selected but right now it looks at all the mesh and adds it to that slide. Let's go ahead and talk about mesh. Obviously you're probably gonna want to not create everything in code. You're gonna design scenes in Blender 3D or a similar program. Right now I have created a function to simplify the loading of DAE scenes. So all I have to do is say, let's see I actually should have, yep. So here you can see it says my function is load DAE and I'm passing it a scene. If you leave it blank, again this is the default scene that I've provided. I've actually provided two default scenes. You can see it loaded this scene up with three monkey heads and a cylinder and they have been added to our selectable list so you can make these things rotate as well. And again, I have another one that's called monkey and that's just a single monkey head. So, but you can load any scene you want, any DAE file into a folder here called models, DAE, and you can see how to there, put them in there and just pass that function that the name of your file and it should load it up. Something else we're gonna do here, let's go ahead and add a grid. So going back into our main function here, I'm going to say create grid. Oops. And you can pass that options as well, but right now this is the default. It just creates a green grid for you that looks kind of cool. Right now it's going through the center of our objects. Let's go ahead and again, that will return the object it creates so I can say grid here equals that and then I can tell the grid to move its position on the y-axis to negative one. And now it should be, if I typed everything, oops, got a spelled position right. Oops, there we go. You can see the grid's now below our objects, but our camera can rotate all the way like this so it goes below the grid. If you don't want to go below the grid, you can come up here to where we create our control for the camera and change limit to true. And now I've set it to not go down below a certain point. So you can still zoom in, drag around like so, but you can't go below that point. Quick, easy way if you don't want it to go underneath your scene. Real quick, I feel like there's one or two other things I want to show you. Oh, rotating a camera. So let's go into our animate here and I'm gonna say rotate camera. And here you just say rotate in direction that you want. Either one or negative one is what I have so far. And when you refresh it will automatically rotate your camera now. Again, you can still click on objects and the camera will rotate. And you can still, with the orbit camera, kind of move around. It limits, you can't drag the camera left and right or up and down because I've set the rotate to always focus at the center of the screen. Actually, I'm gonna have it, you're gonna be able to pass it what object you want to spin around and focus. By default, right now it's the center of the scene. So there's that. You can still kind of zoom in and out a little bit. And of course, like I said, if you want to rotate the other way, just change it from negative one to one and now it's gonna rotate around left. So that's what I've created so far. It's just, I like using 3JS. Lots of times I find myself going and looking at how to do certain things like loading a model file like a DAE file, which I do a lot. And it takes a number of lines of code, not a whole lot. But I wanted to just be able to call it real simply. So now all I have to do is say load DAE and pass it the scene and it will load it. And I can do that multiple times. If I wanted to load, let's see, I should be able to do this. I'll remove this and I'll load up that default scene with the three monkey heads. So now you can see there's the green monkey head and the blue monkey head. So you can load up multiple scenes like that very quick. You know, the only drawback right now again is my little second delay here. If your scene is very large, well actually the load scene does run this clickable function, this mesh list again. So that's not really an issue, shouldn't be an issue. This kind of delay here is just to make sure that it gives these objects a second to load before it adds them to the array. Again, early into this, changing things a lot. Wanted to give you a look at it. Go ahead, have a look at it, play with it. Thank you for watching. If you have any suggestions, you know, go ahead and download the code and submit some stuff to GitHub and maybe I'll merge it in there. Thanks for watching and as always, please visit filmsbychrist.com. That's Chris the K, have a great day.