1. Introduction

1.1 Welcome

Hello and welcome to 3D Animation on the web with 3.js. My name if Craig Campbell and I will be your instructor for this course. In this short course, we're going to build on the fundamentals of 3.js that we covered in previous courses. As we take a look at some more advanced animation techniques using this framework. So hopefully you've already taken a look at our beginner course and our beyond-the-basics course. And with that under your belt, we'll get started with 3D animation in the next lesson. Thank you for watching.

2. 3D Animation With Three.js

2.1 Reviewing the Basics

Hello and welcome back. In this lesson, I want to start with a scene that we created in one of our previous courses on three.js, and I want to use this scene to kind of refresh our memory on the basics of the three.js framework. So in our HTML, you'll see we've added nothing here. And in our CSS, all I've done is add a margin of zero, an overflow of hidden to our body, and then everything else is taken care of in our JavaScript. So this particular scene is taking up the full width and height of our browser. And you can see we're using window.innerwidth, window.innerheight. And we're gonna be using this same method throughout this particular short course. So when we're creating a scene In three.js, if you remember, we start with a camera. And we're using a perspective camera here which again is gonna be the camera we're gonna be using throughout this course. We can set the position of the camera. And we can set other properties as well. We also have a renderer, and we need to make sure that we set the width and height of our renderer, and that we use the same width and height aspect ratio that we use for the actual scene itself. That way, things don't get skewed or distorted and then we append that renderer to our body or you can append it to a canvas if you prefer. And then we can create some shapes, in addition to our shapes we also have lights. And then we have our animate function, which is gonna loop over and over again at the screen's refresh rate. Now if we go back and take a look at our shapes, we can review how shapes are created so shapes are basically made up of three different things. First of all we have a geometry of some sort, in this case we have a box buffer geometry. And a buffer geometry is basically just a more efficient version of the original. So a box buffer geometry is a more efficient version of the box geometry. And here, we're basically taking this box geometry, and making 1,000 shapes out of it, using this for loop. So again, we have three elements of our shapes. We have a geometry, we have a material, and we have a mesh, and the mesh is what brings the geometry which consists of the points of our shape, and the material which consists of the basic look and feel of our shape. It brings those two items together. So again our shape is made up of our geometry and our material. Now when we're using a for loop like this, you'll notice we're just using one geometry over and over again, and that's okay. But it's the mesh itself which we're saving in this variable called the shape that we usually end up making our transformations on. So we've got these random numbers that we've calculated here. And we're using those random numbers to set the shape's position, rotation, and scale. And again, we're applying all of those transformations to the mesh. Again, the mesh is the combination of the geometry and the material. So that's how shapes are created, let's scroll down a little bit and take another look at our animate function to refresh our memories on how that works. So the animate function, you can really call this whatever you want to, but the key to making this work right is we have this request animation frame call here. And inside that method call we are calling on the function that we are inside of right now. And that's what creates this animation loop. So this function is gonna run over and over again at our screen's refresh rate. And if we're going to create some kind of animation here, some kind of looping animation, we could do that inside this function. So here, you'll notice we're taking the whole scene and we're slightly increasing the Y-rotation of that scene every time we run through this animate loop. So every time we run through the loop, we're increasing Y, or the Y-rotation by a value of 0.01. And that's what's creating this animation loop. Now we're gonna take a look at how we can do this using a camera instead of rotating the whole scene in another lesson, but right now we're kinda taking the easy way out and we're just rotating the entire scene. And then after we apply our transformations, whatever those may be, then we run the render method on our renderer passing in the scene and the camera. And then after we create that animate function then we have to call on it in order to start that animation loop. And then one thing that we have inside all of our three.js projects is this on window resize event handler. So that if you do resize the window, it will maintain the right proportions, things won't get squashed or stretched and it will behave like we expected to. So again, that's just a very quick refresher. If none of these sounds familiar to you, then you probably need to go back and take a look at our introductory and our intermediate courses on the three.js framework. This is not the course to watch if you're starting from scratch if you've never used it before. So, if you've got all of that under your belt. And if this refresher made sense to you, then we can move on with talking about some more advanced animation techniques in the next lesson. Thank you for watching.