🌳 Introduction to ThreeJs - Part 1

date

Feb 8, 2023

slug

ThreeJs Material

status

Published

Intro :

Hello and welcome to my ThreeJS introduction. I won't insult you by going over the basics when there are superb online resources such as the Threejs online book or simply the documentation. Instead, I'll try to answer some questions I've been asking myself since I first understood the basics. I'd like to start by talking about Materials and their incredible properties. Lets start with the Basic Material.

Basic Material:

As its name suggests, this is the most basic of all the materials we'll be looking at. It's used to create objects without shadows or reflections, and we don't need any light to see it in our scene. It's a really handy object for testing our code. Here's how to implement it.

visual:

We also have the option of showing only the edges that make up our shape, which is very useful for aesthetics during demonstrations. Just set the wireframe property to true.

Lambert Material :

This one I use less, but it's always good to know, this material takes ambient lighting into account, creating surfaces without reflections. But be careful, if there's no light in your scene, it won't show up on your screen. So let's go with a lambert material and a well-lit scene. I'm putting the code here but I won't go into the properties one by one as this is an introduction to show you how the basics of materials work. If you want to go further, as I always say, documentation is your best friend: doc

We can see here that the faces are darker or lighter depending on the position of the light, and that's a really nice way of bringing your world to life. It's cool, isn't it?!! 😅

Phong Material :

This one is more complex, and you'll see that the further you go, the more properties are added to the materials we gonna look. This speciality is that the material phong takes specular light in consideration. “But Alex, what's specular light?”. Well, a picture's worth a thousand words, so let's start with that and then I'll explain how to code it:

So, as you can see, our sphere has a white point and then a gradient of color towards darker colors. Yes, that's it! easy, isn't it? The aim is to be able to simulate more materials like metal or plastic.

the code :

Ambient light is used to show the gradation, otherwise you'd have a sphere with a completely dark end.

Standard Material:

This one is like Phong Material, it just adds even more properties to control the appearance of the surface. So I won't go on about this material any longer, but once again I invite you to have a look at the documentation.

Physical Material:

He's the daddy of them all, he's got all the properties and adds more, and if you want to go for pure realism, he's your friend for life. If ever there was a game to play with, this is it. I swear you're going to have a lot of fun with this one, so don't hesitate.

Depth Material:

But it's used to create depth effects. The further the object is from the camera, the darker it becomes. Light has no effect on the material, so it's displayed without light. Here's a little image to help you understand how it works:

Normal Material:

This material allows you to see the direction of the normals. “Alex, what are normals?” I know, I know, I'm getting to it. You have to see normals as arrows perpendicular to a face. Look at this picture:

You see, each face has an arrow pointing outwards, and this is used for many purposes. For example, we use normals to see if two objects collide (but that's not the point). If we make a sphere in our environment with normal material, we'll see that:

So it's not intuitive if we don't tell you. We're talking about an arrow and it's multicolored. In fact, you have to see it as a heat map showing the direction of the arrow (the normal one). If you don't see what a heat map is, then tell yourself that when it's light blue the arrow points to z (up) and when it's red the color points to -z (down). We take the combination of colors to create one that represents the direction where the normal point:

Here we see better what I mean, now imagine lots of arrows on each face. Also, so as not to get lost later, don't forget that each face is made of triangles. Each one you see is in fact 2 triangles and therefore 2 normal ones pointing in the same direction outwards. (I added the black lines with an editor, so the code won't display them its normal).

the code :

You'll find that you don't need light for this material.

Points Material:

It's considered a Material but personally I see it more as a display of points in the scene, look at this image:

but it's cool, you can do lots of things with it, especially at the particle level.

Conclusion :

That's it, I've introduced you to the materials of threeJs and these are concepts that can be found everywhere in graphics computing. It's been a pleasure to accompany you on this journey of discovery, and it's a long one. Computer graphics is a lot of concepts, but don't give up - it's worth the effort, and you'll have more fun than anywhere else.

🌳 Introduction to ThreeJs - Part 1 - Materials