Graphics Reference
In-Depth Information
cubeMaterial.map.wrapS =
cubeMaterial.map.wrapT
=
THREE.RepeatWrapping;
These properties define whether Three.js should stretch the texture to the
side (
THREE.ClampToEdgeWrapping
) or repeat the texture with
THREE.RepeatWrapping
.
4. The final step is to set how often to repeat the texture along the
x
axis and
y
axis:
cubeMaterial.map.repeat.set( 2, 2 );
In this case, we repeat the texture along both its axis twice.
5. An interesting thing to know is that by providing negative values to the
map.repeat.set
function, you can also mirror the texture.
How it works...
Each face within a geometry has a UV mapping that defines which part of a texture
should be used for that face. When you configure a repeat wrapping, Three.js
changes this UV mapping according to the values that have been set on the
map.repeat
property. As we also define that we want to use
THREE.RepeatWrapping
, WebGL knows how to interpret these changed UV val-
ues.
See also
• Repeating textures works by changing the UV mapping according to the re-
peat property. You can also configure a UV mapping by hand, as shown in
the
Using Blender to create custom UV mapping
recipe.
