Hello in this video we are going to look at using textures and colors with our geometry. More specifically, we're going to use it with our cube, but you can use it with any geometry within free j s pretty simple stuff. We've already got some images that we've just created using logos from our various divisions in Sona and our products, you can use whatever image you want and obviously the dimensions will match the actual object or geometry or more specifically, the face of the geometry that you're applying to. But again, pretty simple stuff. This tutorial is relevant for cube cuboid, see our all our goods. And as usual, if you go to three JS dot o website, look at the example look at the documentation thing got great stuff there to help you even if this series doesn't cover a particular node function.

So first of all, what we have is a mesh basic material. We are going to use Using our new mesh, mesh basic material, but we're going to be using one for each face. At the moment, we're just using a global mesh basic material for our geometry. But as the two paths, as you can see 12345 and stick faces obviously, in wireframe mode, we'll disable wireframe mode when we're actually viewing our textures. So what we want to do after we created the geometry we can just leave that as it is and actually increase the size later on so we can see the textures a little better on a create a new variable called Vol. Two materials equals this is going to be an array of mesh basic material, like said we're going to have six different mesh basic materials for each face I can easily customize them.

So you want to do new free dot mesh mesh, basic Cheerio. And now, in here, we'll do curly braces and then in here, instead of doing color and then wireframe, you want to do a new free drop texture loader dot load. And now you simply specify the path of the image you want to load for me image for slash one dot png. And then outside the breakfast is Saeed. cola on Free dot double sided. Let's see what this does in a moment.

All in all, I think demonstrate it once we've implemented it can we can remove this semicolon because we're within an array. Just put a comma there and then copy and paste that five more times while also tat indentation. So, fix this indentation. Finally, fix this one. Now we got to do is change this to two to three to four, five to six. So we are all done this i love about brackets, it gives you a preview of all the images which is fantastic with dimensions as well.

So it's a great way of just taking a look at files without having to go into the find arrow to the Explorer, depending on operating system you use using and wasting time. I'm just gonna put some comments. So you Know what soy did refer to right side, left side, top side, bottom side, front side of it, and guess what the last one is the backside. So now that we've got this cube materials created, we want to leave this material because we're going to be using this, but we need to replace it. Instead of using a new mesh, basic material which we've already used in our array, we need to do new three dot mesh face material to specify the array so that's cube materials. And now in here, we just specify the material and it's as simple as that.

So if we save this Go back to a web browser refresh. And as you can see, we have our little cube. Or I'm actually going to do obviously we don't need actually Oh yeah, that will go y prime anymore anyway, because we removed it from we removed the old mesh basic material, which is fine plastic, are actually going to increase the size of this 32 to the soul crucible quite a bit. Yeah, this is a lot better so we can easily see each of the sides. So if you want to use a color, you can easily mix and match. So instead of doing math, you could do could do color colon, zero x. FF, FF, FF, which is white.

Save that and that was there. Right? likes So we now have a Boyd side as well. So it's easy to mix and match colors and textures. So like I was saying before, we have this double size. So let me show you what it does.

And inside we can see our texture. And if I go inside, so if we're inside the object, we can also see the text is obviously the reversed. And if I were to, let's just say change this to Front, side, I'll change it up one to one side as well. Front side are changing to one, two, back soy. Soy so now we have two front side textures are actually ones a collapse, two, front side, two backs up to backside textures and to duplicate textures. As we've seen, the double sided can be viewed the Like and when the camera is on the inside of the the model.

So if we were to refresh we can view certain textures because we are not inside the Sophie were to go inside it certain objects we can see and certain objects we can't. So it's pretty simple stuff honoree reverse didn't look very nice at all turns back to do soy turbo soy double size there we go we have our beautiful little cube running with textures and colors. It's really that simple. Like I said, if you want to use it with all the geometry, just check out the free j s website and they got loads of examples and documentation. If you have any questions, feel free to message us and we will respond as usual. And thanks for watching and I hope you have a great day.