Setting up repeating textures

Sometimes, when you've found a texture you want to apply, you might want to repeat it. For instance, if you've got a large ground plane on which you want to apply a seamless wood texture, you don't want the texture to be applied as a single image for the whole plane. Three.js allows you to define the manner in which a texture is repeated when it is used on a geometry. In this recipe, we'll explain the steps you need to take to accomplish this.

Getting ready

The first thing we need is the image that we'll use for a texture. For the best effect, you should use seamless textures. A seamless texture can be repeated without showing the seam between two textures next to each other. For this recipe, we'll use the webtreats_metal_6-512px.jpg texture, which you can find in the asset/textures folder that you can find in the sources for this book.

To see the repeat effect in practice, you can open the 04.12-setup-repeating-textures.html example in your browser.

With the menu...