Hello, in this video we are going to cover implementing a control system into our free j s scene. Thankfully, there are a bunch of libraries out there that we can utilize will be utilized one called orbit controls, log said there are a bunch of them. And to see how to use it, go to the free JS website, go to examples, type in controls, you can see the different types I can do more of a pointer lock. So this is locked to a point and I've moved backwards and forwards or really cool stuff, sort of like a first person shooter. Let's get to that. You can do a slice or a method so it's following the camera and I can move in and out.

So so this is really cool. So you can do role in this. This will be great for a space game, but we're going to be looking at the obesity Stop, which is a fantastic simple control system really easy to implement, and is very useful for navigating our scene. So to use this, first of all, you want to make sure you have free JS download it, you most likely go download it, if you delete it, make sure you download it again, because on the part of free j s, you get a bunch of different files. If you go to examples, scroll down to J s, then go to controls, then go to ob controls, just copy that, go to your project. paste that into the J s folder.

And now what we want to do, as you can see, it's in the J s folder, what we want to do is include this file, so right here, correct source code j s for slash ob control Oh, that didn't work for a bit Ctrl J s. And now we've got it included. to actually implement it, it's really simple. All you have to do is controls equals new, free dot o bit. Controls, give it two parameters. First is the camera. And the next is the DOM element from the renderer.

So renderer dot DOM element, save that, we go to our web browser refresh. We can actually move this around. That's really cool. We can zoom in and out. So I'll keep the left mouse button clicked. And I can rotate our world It looks like we're just rotating the scene.

But if I were to pan using the right mouse button. You can see I'm not rotating just one object, I'm rotating around the center point and that this is also rotating around, well, the set top central point and zoom in and out, but keeping the middle mouse button pressed, I mean scroll wheel pressed, and then just zoom in just moving my mouse backwards and forwards. The one I'm going to do is finally just disable rotation to get a better understanding of what is happening because it's sort of counterintuitive. As you can see, we can rotate around our object, we can plan our object. So this is a great way of just navigating our scene. So imagine if I wanted to go a little closer to this corner.

I'm gonna look close. I'm looking at it. I'm happy with a corner, zoom back out, have a look at a view like this. And yes, I'm very happy with what we got. So this is just a Really quick introduction into control systems in free j s. Like I said, we go to the free j s dot o website, go to examples, type in controls and have a look at all the different control systems. You can use the control system view source and actually have a look at what file it needs to tell you where to get it from and how to implement it.

Most of them are usually one or two lines of code which is fantastic. If you have any questions, feel free to ask us and we will respond we we are like that. And as usual. Thanks for watching. I hope you have a great day.