3.2 Adding a Texture

Okay, next we're going to turn a plain old boring cube, into one of the most exciting objects to grace the Earth, a dice or a die. Dice, die, one dice, one dice, a single die. Let's do this. So historically dice is the plural of die, but modern standard English dice is both the singular and plural. I am a modern sort of fellow, so I'm gonna go with die, dice, I'm gonna go with dice. To make our cube look like a dice, we're going to use textures. Textures in Three are basically images we can use to decorate our objects. And what we want to do in this instance, is to slap an image of some dots on each side of our cube. I've prepared six individual images with some dots on them. I've also put them up here online so you can download them if you're following along. Save these images to a folder in the root of your project called textures. Here they are, okay. And because we'll be using JavaScript to load these images in, we need to be serving a page from a server rather than just opening it from the file system. There are various ways to get web server running. If you're using a Mac, then an easy way to do this is to run this command in the root directory of your project, python-m SimpleHTTPServer. Then if we go to the localhost 8000, we'll see our page is normal. Right, back to our code. In our create cube function, we're going to need a texture loader. >> What's a texture loader Stuart? >> A texture loader is, thanks for asking, is a way of loading assets and managing textures. Our assets in this instance are our dice faces. First we create the loader, var textureLoader = new THREE.TextureLoader. We can then load our images one at a time by saying, texture1 = textureLoader.load, then the path to the image, textures/1.jpg. We want to do this for each face, so let's duplicate each line here. Great, so our texture loader is loading in each image and storing as a texture available, but what do we do with these textures? Well, there's a lot of step before adding them to our cube, we have to add them to material. This may be confusing, so let's clarify. A texture is basically an image we can add to an object. A material, however, is how light interacts with the surface, is it shiny or matte, that kind of thing. If we head over to the Three documentation, we can see there's a whole bunch of different types of materials, all with funny names. This one looks like the kinda thing we need. Okay we're going to need a MeshLambertMaterial for each side of our cube. Let's create an array called materials and for the first element in the array say new THREE.MeshLambertMaterial, then as an argument we pass an object with a single key, map, which is short for texture map. And we'll assign that our first texture. Again we'll need to duplicate this per face, changing each one to use the relevant texture Great, we now have an array of materials. All we have to do now is tell our cube to use this array. Down here we no longer want to use a MeshNormalMaterial, we need a MultiMaterial. This material takes our array of LambertMaterials and creates a single material that can be used to wrap our cube. And the way it wraps means that each material in the array is assigned to a different face. Okay, to the browser. Refresh, lovely, a spinning dice, die. Notice that because we re-positioned the light that was behind the camera, we can see the faces getting lighter and darker as they rotate. Take a few minutes to experiment with changing the position of the light and the camera. I'll see you in the next lesson.