 As always as part of a series of videos be sure to check out the annotation on the screen for the full playlist. I hope you have watched them because we are building on code that we've previously created as well as techniques we've looked at. Now a few tutorials back we used the trackball library to control the movement of the cameras with the mouse but you can do it without that library just using some basic math. Now we're not going to get into using the mouse but we're going to do a basic basically the camera doing a 360 spinning around looking at our grid so we made this grid last week. Let's go ahead and look at the code. I've moved the code into a file called basic camera spin and what we're going to do here is we're going to go down to our render function and make some changes here. In reality we could put this you know I was going to put this in the render function and in fact I'm going to do it because that's the way I've done it when I practice this but we're also going to make an animate function. This stuff could also go in the animate function but since every time the render you render the camera is going to move I guess render is a good place to have it. In the example code on the 3js website that's where they have it but that doesn't mean it's the only place it could go. But anyway in our render function we're going to say we're going to create a variable we'll call it timer. What it's going to do again if you've done any type of gaming development game development or if you've watched my old tutorials on Python's pygame you know that we've talked about you know limiting the the number of frames is what we did in Python in the pygame by creating a clock and setting ticks to prevent it from running for more than 30 frames a second or 60 frames a second. And what this does is it just keeps things consistent in speed where if you've ever tried to play like an old DOS game on a newer computer some of the old games you can't play because they go super fast because they just let those programs run as fast as the computer could run and they just didn't think about computers getting as fast as they are nowadays. So using some sort of time or clock function to time the stuff in your games or 3D renders will help keep it consistent and prevent that from happening. Now it may run slow or jerky but you're not going to get to where it runs so fast in 10 or 20 years when computers are faster that it's unusable. So but we're going to use the date function we're going to get now and we're going to take that value and we're going to multiply it by 0.0005 and you can play with these numbers and see how it affects the script. I didn't come up with that once again this is from the documentation and examples on the 3JS website but we're going to use now is we're going to say camera that's our camera object which we've already created and we're going to adjust its position for its x-axis and we're going to say use math and dot COS timer which is what we just grabbed above the variable which is the now time multiplied by a very small fraction and we're going to multiply that by 10 and we're not multiplying the timer by it we're multiplying the COS and I'm sorry it's been a long time since I've been in geometry I'm just following documentation I can't remember what COS stands for. I'm assuming it's some sort of curve measurements yeah I'm going to stop talking about that just trust me this works based on the documentation if you're more into math it's been 15 years since I've been in school and I didn't pay I was really good in math but I didn't pay much attention either so forgive me we're going to do the same thing here but for the z-axis instead of getting the cost we're getting the sin which I do know from working with synthesizers I'm assuming maybe that's the curvature of a wave or in this case the curvature of the camera I don't know once again I'm going to stop talking now again when we created the camera above we told it to look at the scene position which be in this case zero zero zero because we're looking at the center of the scene well if we don't keep updating that as the camera moves it's going to get off centered so if we want to look directly at the center of our scene or another object at some point we're going to say the camera not the camera position the camera look at this is we did in a previous tutorial and is up above in the script we're going to say look at the scene dot comma sorry yes dot position so getting the scene position which the coordinates of the scene which will be zero zero zero and again if you had other objects you can have it look at an object so basically this is going to create the camera slowly spinning and looking at the the scene but if we save this and go back here and refresh nothing happens because we need to make it so that it continuously animates it so what we're going to do is we're going to create another function and we're going to call it function animate and we've done this in previous tutorials and there's going to be two things in here we're going to say request animation frame animate so basically it's calling itself it's basically creating a loop that's calling itself it's going to go let's animate let's animate let's animate get a new frame get a new frame get a new frame but each time it does that we also want it to run our render down here still if we ran the script nothing would change because we haven't called the animate function yet so we can come up here and after we initialize our script we can just call the animate function so basically our code is going to first run our initial function here which does call render once it doesn't really matter that's going to bypass that's going to happen and then the next room is going to be called so we don't even really need that here it doesn't hurt to have it we're also telling the camera to look at the scene which once again is going to happen so fast in the render it's not even we don't we could remove those two lines it's not going to make a difference visually to anybody but if I hit f5 now you can see we're looking down at the scene and rotating now we're kind of high above the scene and that's because of our y position of our camera so what I'm going to do is here we've set the x y and z chords and both x and z are going to be overridden pretty fast so we could just set the y position but it doesn't matter I'm going to go ahead and set this to four that will the camera a little closer to the grid oh little yeah not four four four four just four please there we go so now we're down on it and we're spinning let's go ahead and try a different value again I recommend downloading this code it will be a link in the description to all the code in this series and playing with the numbers and seeing how they affect the code so there we go we've got a spinning camera using just the minimal library from 3js and a little bit of math so if you want to spin around the scene or if there was an object in the scene you want to spin the camera around it it will do this forever let me scroll down here and let's try I haven't played around with this let's go ahead and try changing some of these numbers let's go ahead and change this to point zero zero one five see how that affects the camera you can see we're moving a lot faster now so you can change the speed of the rotation by affecting this number here making it we want to go slower a smaller number or if we want to go higher we can go a higher number again we can adjust the the camera position either the Y up here or we could probably affect the Z and the X here as well but go ahead download that code play with it so very simple basically what we've done today that's new is we've added to our render function I think that grabs the date and time and multiplies it by a fraction which is kind of like dividing and then we're going to affect the camera position the X and Z position and do some math with that timer that we just created and make sure that every time we move the camera we reposition it so it's pointing at the center of our scene we also added an animate function that basically gets us new frames and renders out those frames and then we made sure that we added in this animate we call the animate function so it actually runs so as always I will upload this code to my website there should be a link in the description to all the codes from the series you can view them there again most of our videos so far we're using WebGL which has some benefits on a lot of systems as far as system resources and using the Jeep using hardware acceleration and but a lot of this is very simple switch it over to using a canvas which we will do in the future and that will in some cases make it not run as smooth but make it more compatible at the current time hopefully as time goes on more browsers and more hardware will support WebGL but if not there's also ways with the 3js library to have it detect whether you know whether it should use canvas or WebGL which is something we'll probably get into in a future try I haven't played with that too much I've just read over it haven't actually given it a try as always be sure to check out the 3js website 3js.org that's thre.org and also visit my website filmsbychris.com that's Chris the K there should be a link in the description also while you're there you can search through all my other videos I currently have around 1500 videos and you can also get a link to my IRC channel there on FreeNode which is Pound Films by Chris once again Chris with a K which is a great place to come chat with me and other people and ask questions below you can comment comments are a great place to put comments the comment section but not necessarily the best place to ask questions also if you're enjoying this topic of three stuff with HTML5 and 3js be sure to like this video so that I know you like it and be sure to subscribe so you don't miss any of my videos and as always I hope that you have a great day