1. Introduction

1.1 Welcome to the Course

Hello and welcome to Three.js: Beyond the Basics. My name is Craig Campbell. This short course is a follow up to the introductory short course, 3D on the Web With Three.js, and this course picks up where that one left off. In this course, we're going to take a deeper dive into the Three.js framework as we explore more shapes, materials, and cameras, and as we create some more interesting and complex 3D projects. So I wanna thank you for watching, and we'll get started in the next lesson.

2. 3D Graphics With Three.js

2.1 Reviewing the Basics

Hello and welcome back. In this lesson, I wanna do a very, very quick review of the things that we've learned in the introductory series on Three.js. And when we ended that series, we ended with a file very similar to what we see here in CodePen. And you'll notice there's no HTML, there's a little bit of CSS, just to set the body margins to zero. And then we have our JavaScript, this is where all of the rest of the major chunk of our work occurs. So, when we're creating a scene in Three.js, the first thing we do is we create the scene itself using newTHREE.Scene. Any time you do something like this with THREE., something, the three is gonna be in all capital letters. So we create the scene with just this one line of code. Then we have a camera that we're gonna create. And this particular camera is taking in the width and height of our window. And calculating an aspect ratio from that width and height, and we're passing that aspect ratio into this perspective camera constructor. And we'll talk later on about different types of cameras that we can use, but the only one we used in that introductory course was the PerspectiveCamera. And so we had our camera angle, or our field of view, our aspect ratio, and then our near and far values, and then we set the position of our camera. So we have our scene, we have our camera, then we have our renderer. Usually, we're gonna be using the WebGLRenderer, but a case can be made for using other renderers different times, but for the most part, we'll stick with WebGL. We set the size of the renderer based on the width and height that we calculated earlier, the width and height of our window. And, note that you can also set the width and height if you're not going to take up the whole screen with your scene. If you're just gonna put it inside a div, then you would use the width and height of that div. And then we appended that renderers dom element to our body of our document. After that, we created a shape. In this case, we created a BoxGeometry, which creates a cube or a rectangular prism, however you set the sizes there. We added a material to it, and these are the things we're gonna need for any shape that we are gonna create. We need a geometry, we need a material, and then we need a mesh that will join that geometry and the material together. And that mesh is where we actually gonna end up looking at. So when we change the properties of a shape in a scene, such as the position or rotation, then we would change the properties of the mesh itself. And so, we can set the rotation here and then add that mesh to our scene. We also talked about adding lights, we talked about a couple different kinds of lights. Here we have a couple of directional lights in our scene, and then below that, we have our animate loop. So we have this function called animate. We're using requestAnimationFrame to call the function again. And it's calling this function over and over again at the current screen's refresh rate, which is usually somewhere around 60 frames per second. And inside this animate loop, this particular file is just adding some slight changes to our x, y, and z rotation. And that's how we're getting this rotating cube here. And then after we update those rotations, we're running renderer.render again, passing in the scene and the camera. And then this animate function is not going to run until we actually call animate. And once we call it, that will trigger this line of code here, which will trigger that animation loop to run over and over again. So, again, those are the basics that we covered in the last course of how to put together a basic scene using the Three.js framework. And as we move forward, we're gonna take a deeper dive into Three.js as we look at different types of shapes that we can create, different materials and lights, and cameras and things like that. So, thank you for watching, and we'll get started in the next lesson.