Geometry, Materials & Mesh

[00:00:00]
>> So Three.js, there's some links here. You're probably gonna wanna keep the docks open for a lot of the day. You can also go through some of the examples. They have got tons of examples, and you can browse the source code for the examples. But the first thing that I like to introduce with Three.js is this coordinate, this Vector3 sorta coordinate.

[00:00:21]
So, we've already got this like little coordinate system here. And we have a little coordinate. But how do we define that coordinate in code? And so we define it in code with this sort of Vector3 data type. So there's like a vector class which can be 2 for 2D coordinates, or 3 for 3D coordinates, or 4 for 4D coordinates.

[00:00:41]
We're probably gonna be working with Vector3 most often. And we just define it like this new Vector3. We pass in the x, y, and z. And you can actually edit this code and see how it changes the little graphic. So the x, the y, and z and so forth.

[00:00:57]
We can set individual components on the vector just by doing position.x is equal to something or position.y is equal to something. And that will change the components the x, y, z. And then we can also use this set scalar function, which is gonna place all three components, the x, y, and z to the same value.

[00:01:17]
So they're gonna say x, y, and z are now gonna be equal to 0.5. Or anything in the past there's 0, just make them all go to the center. And then another function we use a lot is this copy function. So copying the x, y, z components from a different Vector3.

[00:01:37]
So that's pretty common. And then also going from into arrays. So sometimes we'll have APIs that will be array based. So the x, y, z coordinates will be in just a simple array. And so we can use this method from array to take the x, y, z and put that into the Vector3.

[00:01:54]
Or alternatively, the other way around, we can use the method toArray which is gonna return a new array that has this sort of structure x, y, z. So that's the basics of vectors. And another concept that's really commonly used is colors. So instead of just using strings like we would in CSS or something like that, in Three.js, we have to use this color interface.

[00:02:20]
And so we create a new color. We pass in the string, maybe a Hex code or maybe an RGB or HSL string or something like that or just a color like tomato, or green, or blue. And then we can change the RGB values of this color. So you could say color.r is equal 0 or 1, color.g is equal to something, color.b is equal to something.

[00:02:43]
These values are between 0 and 1, instead of being between 0 to 255. They're all normalized. Same with HSL. When we use things like color.setHSL, it's all normalized between 0 and 1. So the hue is degrees between 0 and 1, where 0 would be 0 and 1 would be 360 degrees.

[00:03:04]
And then the saturation would be a percentage between 0 and 100%. The same with the lightness. And so that's how we start to use colors. Now, you can also just pass in the RGB values in the constructor instead of passing in a stream. So it'll all be between 0 and 1.

[00:03:23]
Another concept that we're gonna be talking a lot about is geometries. And so geometries are sort of the volume, the make up of a mesh. How it looks in 3D. So here we've got a plane. A plane is basically just these two triangles that when we put them together, they make up a square or rectangle of some kind.

[00:03:42]
And it's called either a plane or a quad sometimes cuz it has four vertices. And this idea, this idea of using triangles you're gonna see it everywhere in WebGL. And that's because triangles are the building blocks of everything we make in WebGL. And so if we wanted to draw a square, we can't just say draw a square, we have to say draw two triangles.

[00:04:02]
That's the most primitive type of rendering that we can do. So everything is built on top of these triangles. And another geometry to be familiar with here, which we're gonna be using a lot today is icosahedron geometries, which creates icospheres and shapes like this. But there's tons of geometries.

[00:04:22]
You can go through the the docs and see. They also have lots of examples of how to manipulate the parameters here. So we can create a cube with lots of subdivisions. And so quite often if you're creating, let's say, like a terrain or some sort of interesting like parametric object.

[00:04:43]
Instead of manually defining the layout, the vertices and the indices, and all the structure of the geometry, it's usually easier just to take a box geometry or to take a plain geometry. Subdivide it by giving it lots of width or height segments. And then once the geometry's created, we can manipulate the vertices.

[00:05:01]
We can change them and create something like a procedural terrain or something like that out of it. And then, couple more concepts would be material, so far we've talked about geometry. Material is more like the surface quality of a mesh. So we have basic material, which is the one we're gonna be using the most.

[00:05:21]
It just gives you the same color that you give in. So if you say I want a pure red or pure blue or something, or whatever the color is, it'll give you that color back. Almost pixel perfect, or it should be pixel perfect in theory. It's unlit, which means it doesn't respond to lights in the scene.

[00:05:43]
So if there's a light in the scene, it's not gonna respond to it. And if there's no lights, it's still gonna be perfectly lit. You can change the wireframe on off. And then when we get into some other materials, some of the lit materials like Phong, Toon, and Standard, these only respond to lights in the scene.

[00:06:03]
So if we don't have any lights in the scene, it's gonna look like this. It's gonna be this black mesh. And that's just like if we turn the lights off in the room, the the meshes around us, the objects around us are not gonna have any light reflecting off them.

[00:06:17]
One more thing to notice would be this flat shading option, which is another option you can pass into the mesh. And this makes it go from a smooth shade to a faceted look. So for low poly stuff, you're gonna wanna turn on flat shading. But for sort of smoother objects, you're gonna want to turn that off.

[00:06:37]
Cool. So now we have the idea of geometry. We had the idea of material and we can combine those two things to create a mesh. And so this is how it looks in code. You just create a SphereGeometry, you're passing some properties. Typically SphereGeometries you'll do twice the amount of, I guess it would be the horizontal segments, as you'd have the vertical segments there.

[00:07:05]
And yeah, you can go really low and you can start to create some more like low poly shapes, are really hard to create really smooth circles and spheres. And then you have a material, this could be MeshPhongmaterial or it could be MeshBasicMaterial. If you just want a simple color, you can pass in wireframe on, off, etc.

[00:07:25]
And then you build a mesh using these two interfaces here, you just specify the geometry, you specify the material. Something really important is that we like to reuse geometries whenever possible. So it's a good idea to create a single geometry, and then reuse that across lots of different meshes.

[00:07:43]
And so we're gonna do that in our work today as well.