On this page, we'll connect some of the very most basic things in graphics to their concepts in THREE.
Warning: In order to make THREE work nicely with Visual Studio Code's TypeScript type checker, I have to use a different name for the THREE library (this is discussed in Box 2 of page 1). For this workbook, I am using
T since it is short to type. So when you read the code or in the snippets on this page, you'll see
T.method rather than
THREE is a scene graph API where we place graphics objects into the world, and then have it draw that world.
THREE uses a right handed coordinate system. For us, we'll always think about y going up, so that the "ground" is the x z plane.
This "y-up" model also is how we'll view the screen. You can think of the screen as a box. The x-axis goes to the right. The y-axis goes up (so it's like a math class, not like 2D Canvas). Because we do right handed coordinates, the Z-axis comes out of the screen.
THREE's world is pretty arbitrary: we can put objects wherever we want. There is an origin (0,0,0) where objects get placed by default. But we can position things anywhere we like. Similarly, the size of things (the units of the axes) are up to us.
THREE lets us do whatever we want - the "world coordinates" are up to us. We just need to provide the transformation between world and screen. This is what the camera does.
In order to work with THREE, we need to work with a few kinds of objects:
Renderer- this is the connection to an image that we draw into (like the rectangle on the web page as a DOM element). We will generally use the
WebGLRenderersince it uses the built in browser drawing functionality. We usually let the
Renderercreate the Canvas in the browser because it will set it up correctly.
Scene- this is the object that stores the world. It is little more than a list of objects (which themselves can have a list of objects, in order to make hierarchies).
Camera- this is the transformation from the world to the image (where the image is the rectangle in a
Geometry- this is a collection of triangles, usually held in a special format so it can be drawn efficiently.
Material- this is an object that describes how an object looks, including how it interacts with lights.
Object3D- these are the objects in the world. Both the regular objects that we see but also the lights and cameras.
Mesh- is a specific kind of
Object3Dthat turns a
Geometry(a collection of triangles) into something we can place in the world.
Light- is a special kind of
Object3Dthat we generally do not see, but instead is used by materials to determine how much light they are receiving (and therefore how they look).
In our programs, we can use as many or as few of these as we want. Here is an example of a scene that has a ground plane (gray square - it actually is a box, just very thin), a few cubes, and a few lights. I will make two pictures of this one world. The code is in the file
3-Scene-2.js. You probably want to read along...
Let's look at what's there...
On the left you see a scene with the ground and the three cubes. I also put in an
AxesHelper so that you can see what the coordinate system is (I've left the
AxesHelper at the origin, so this represents the "world" coordinates). Just as in class, red = x, green = y, blue = z. Since the axes are there, you can tell that the camera is placed above the ground, and some distance along the X and Z axes. The little orange stuff in the upper right is an artifact of the "camera helper" that we'll discuss in a moment...
On the right you can see a second picture of the same scene taken with a different camera. This camera is a bit farther away so you can actually see where the first camera is. Normally, we don't see cameras. But I've added a
CameraHelper object to the scene that is attached to the first camera and will draw the red and orange lines so we can see where the camera is. The orange stuff in the first image is the first camera basically looking at itself. I've also added a
LightHelper so you can see where the light source is.
There are some things to notice in this example:
In this workbook we'll focus on understanding how to use these pieces to make pictures and animations. And then in the future, we'll start to understand how they work.
Now might be a good time to read the first parts of Chapter 6 of Hart's Big Fun Book of Computer Graphics (Hart06-jan19.pdf). This Chapter mixes in many different, but important things, including a review of the vector algebra basics. Sections 6.4-6.6 discuss rotations, which we will talk a lot more about later. The section on Gramm-Schmidt Orthonormalization is useful, but a more advanced topic and is optional.
In the THREE API, we have objects that correspond to the basic abstractions in computer graphics. We create a world (with a right-handed coordinate system) and place objects into it. We give them surface properties (to determine how they look), and put lights in. Then we place cameras that take pictures of the world.
On the next page we'll learn more object objects and how they are transformed.