 Okay, as always, this is part of a series. There should be an annotation on the screen to the full playlist. I recommend watching the previous stuff because we're building off stuff we've already learned and written. So I have this basic script here and it's just displaying a cube that does nothing. Nothing happens when I click or move the mouse or drag or anything like that. And today we're gonna do a very, very, very simple interaction with our scene is that when we click anywhere on the scene, this cube is going to rotate a little bit. I wanna get into more smooth and fluid rotations and animations in coming weeks as well as doing certain things when you click on certain objects. But today, click anywhere on our scene, cube's gonna rotate a little bit. So create this HTML file called clickcubehtml and all the scripts I'm creating for this series will be up on my site. There should be a link in the description of this video that will bring you to all of those. Let's go into here and have a look at our code. Okay, starts off, we have our HTML tag. We have our header tag, our head tag and we got our style and our CSS. Basically just getting rid of the white border around our body since our scene is going to be in the body. Again, this is all stuff we've gone over in previous tutorials. Inside our body, we're calling the three JS minimal script here. And then we're creating our own scripts. We're gonna create some things, camera, renderer, scene. We're gonna call our initial function, which is right here. What happens inside that function? Well, we create the renderer or at least we assign it, we create it up here. We assign it saying that this is an object, it's a new object. From our three JS library, it is a WebGL renderer in this particular case. There are other types of renderers depending on exactly what you're going for. That renderer, well, we're gonna set it to its size to be the width, the interior width and interior height of our window, meaning it's gonna be the full screen in this case. Doesn't have to be, but since we're doing that with our tutorials here, we're going for full screen stuff here, full window stuff at least. And here we're gonna take our document, which is our HTML page that we're looking at right now and we're gonna take its body and we're gonna add to it the renderer we just created. Then we're gonna create a camera or assign the camera. We're gonna say it's a new from the three JS library. It's a perspective camera. We give it its parameters right here, some positioning. And then we're gonna create a scene. We're gonna create a cube, give it the color of blue with a Lambert material. It's a oblong, it's not a perfect squared off cube. One side's longer, twice as long. We also have a light that we add to the scene here. We also are adding the cube here. We could have added that up here. All depending on how you like to organize stuff. We also have it set to when the window changes size. When it's resized, we're gonna resize our view, which is this function here. We've gone over that. We've gone over all this in previous tutorials. And then we're gonna render the screen once. At this point, we also have a render function that will use our renderer that we created. And we're telling it to render this particular scene using this particular camera. Okay, enough of the review. Let's dive right into what we're gonna do today. We're gonna create a new function. I'll put it right here. It's going to say, well, it's a function. It will be on document, mouse, down. So when the mouse button goes down, this is going to happen. What is gonna happen? Well, at this point, we're gonna call, well, you know, I was gonna, just to keep things organized, I'm going to do it the way I was planning on doing it. We could put the animation right in here, but maybe you wanna have multiple functions or different things happen. We're gonna have it called. All it's gonna do is call the animate function that we're about to create. So technically, we can put what we're gonna put in the animate function inside this function in this particular case. Then again, as your script grows, it's good to organize things. You might wanna have different functions happen when you click based on different scenarios and variables and whatnot. So I'm gonna break it up. I'm gonna create a function animate. And inside this animate function, we're just gonna find our cube and we're gonna set its rotation on the y-axis in this case. And we're not gonna set it to a particular value. We're gonna add to what it already equals. So we're gonna say plus equals and we'll say 500. So we'll move it 500 degrees of rotate. Well, not necessarily degrees, but units of rotation. And then we're going to render it. We don't render it. It will move it, but we will never actually see that render happen. Because we need to render after we, just like if you, like I said, didn't pass. If you've done type of video game programming in the past, especially something like Pi game, you have to redraw the screen while when you're rendering, you're redrawing the screen. So we make the change, then we redraw the screen. And that's what we're doing there. Now we've created these two functions. We need to call those functions somewhere. So I'm gonna come up here to our initial function. And I'm gonna say document, which is our webpage. So we're gonna add an event listener. And now we're gonna say, well, on our webpage, so our document is our webpage. We're gonna listen. Where are we gonna listen for? We're gonna listen for the mouse down. So anywhere in our document, if the mouse is clicked, we're gonna say called our function that we created down there that we called my document, or not my document, on document mouse down. And again, you can call that function where you want. That's kind of long. A lot of the example stuff, right? Things out like that. When I'm writing code for myself, I tend to abbreviate a whole lot. I probably would just say mouse down or even something short, because I like to keep things short. But for tutorial use, just to clarify what it is, I'm gonna do that. False or not gonna expect anything back from that function. I'm gonna write that. And if I wrote everything properly, gonna refresh our page here. And at first, everything looks the same. We've got our cube, it's not moving. But if I click anywhere on our page, every time I click, it rotates 500 units. Again, I've showed you in the past if you wanna go a certain number of degrees, how you use pi divided by 180, then multiply it by the number. In fact, let's do that if I can remember correctly. We'll say 45 times, I think it's math. Is it dot pi? See, I shouldn't be trying to do stuff on the fly. Times, or is it plus 180? Ah, see, I should. That's not right at all. Let me check my notes from previous tutorials here. I'll just go to my scripts page, HTML5, 3JS. So these are the scripts we've created already in tutorials we got a rotate cube. That'll probably be it. Let's look at this. How close was I? Oh no, that one's not going a certain number of degrees. Let's try another one. Anyone remember what tutorial it was? I did that in sphere, cylinder, camera rotate maybe? Here we go. Well, I was actually pretty close. We've got to divide and it's capital PI. So going back to my code here, I was actually really close. It's divide PI. So we're taking pi, three point, blah, blah, blah, blah, blah. Divide it by 180 and then multiply it by the number of degrees we want to go. So each time that happens we are going to go back to here, refresh this. So that should be 45 degrees each time, which it is because I click it twice and it's turned 90 degrees. So let's go back here and lower this number down. Let's say we want to go five degrees every time I click. Much smaller of a number. We'll refresh. Click, click, click, click, click, click, click, click. So that is clicking anywhere on our document causing the cube to rotate. And if we had more than one cube in this particular case we would be able to rotate multiple things because we're not clicking on the cube. So we're just saying, do all this, whatever's inside this function, which is in this case calling this function. So basically doing whatever's inside those two functions and render function. All anytime you click anywhere. So it might seem a little funny that we have this function that all it's doing is calling this function. This function does one thing and then just calls this function. This function is only doing one thing. Really we could have shortened this up a lot for this particular example, but as your code gets bigger you want things broken down like that because these will start to have more things inside each one. That is it for this tutorial. Again, just like all the other scripts from this tutorial they're all here at my website. There should be a link to this in the description of the video. I hope you enjoyed this tutorial. If you did be sure to subscribe so you don't miss any new ones. I post a new one every Friday on the topic of HTML5 and 3D stuff for the coming weeks. There should be an annotation on the screen to the full playlist. If you get to a point in the playlist where you can't access the next video because I haven't published it yet, wait a week and there will be a new one next Friday until I finish the series. So be sure to subscribe so you don't miss that. If you like these tutorials be sure to click the like button so I know that you're enjoying them. I know this one was a little simple but we're gonna get into a lot more complex or at least fancy looking animations here in the next couple of weeks and I just wanted to give you some sort of interaction with that to start off. Be sure to visit my website filmsbychrist.com that's Chris the K. There should be a link in the description. Go in there, you can search through my videos and playlists and also you contact me through my IRC channel which you can find a link to in the description of this video or on my website under social networking. I hope that you have a great day.