Graphics Reference
In-Depth Information
To see the repeat effect in practice, you can open the
04.12-setup-repeating-
textures.html
example in your browser.
With the menu in the top-right corner, you can define how often the texture is re-
peated along its
x
axis and
y
axis.
How to do it...
To set up a repeating texture is very simple and only requires a couple of steps:
1. First, create the geometry and the material:
var cubeGeometry = new
THREE.BoxGeometry(10, 10, 10);
var cubeMaterial = new
THREE.MeshPhongMaterial();
In this recipe, we use
THREE.MeshPhongMaterial
, but you can use this
recipe for all the materials that allow you use textures.
2. Next, we load the texture and set it on
cubeMaterial
:
cubeMaterial.map =
THREE.ImageUtils.loadTexture
("../assets/textures/
webtreats_metal_6-512px.jpg");
3. The next step is to set the
wrapS
and
wrapT
properties on the texture:
