Three.js RepeatWrapping vs MirroredRepeatWrapping

When texturing 3D models in Three.js, controlling how textures tile across a surface is crucial for achieving realistic visuals. This article explains the differences between RepeatWrapping and MirroredRepeatWrapping, demonstrating how each mode affects texture coordinates and helping you choose the right wrapping method to eliminate harsh seams in your 3D scenes.

Understanding Texture Wrapping in Three.js

By default, Three.js textures use ClampToEdgeWrapping, meaning the last pixel of the texture is stretched to the edge of the mesh if the texture coordinates exceed the 0-to-1 range. To repeat a texture, you must define the wrapping behavior on the horizontal (wrapS) and vertical (wrapT) axes and define a scale using the repeat property.

Three.js offers two primary wrapping modes for tiling: RepeatWrapping and MirroredRepeatWrapping.

1. RepeatWrapping

In RepeatWrapping mode, the texture simply repeats itself continuously at its original orientation. When the texture coordinate exceeds the boundary of the image, it wraps directly back to the opposite edge (from 1.0 back to 0.0).

• Behavior: Direct duplication. The left edge of the next tile meets the right edge of the previous tile.
• Visual Result: If the texture is not perfectly “seamless” (meaning the edges do not naturally align in color and pattern), you will see distinct, sharp lines or seams where the tiles meet.
• Best Use Cases: Perfectly tileable materials, such as manufactured brick walls, grid patterns, or floor tiles designed specifically for seamless repetition.

2. MirroredRepeatWrapping

In MirroredRepeatWrapping mode, the texture repeats, but every alternate tile is mirrored (flipped horizontally or vertically) along the axis of repetition.

• Behavior: Alternating flip. The right edge of the first tile meets the flipped right edge of the second tile.
• Visual Result: Hard seams are automatically eliminated because the adjacent edges are identical. However, this mirroring effect can create a symmetrical, “kaleidoscope” pattern that can look artificial if overused.
• Best Use Cases: Organic textures like grass, dirt, water, or stone where the texture is not natively seamless, and avoiding harsh geometric edges is more important than avoiding symmetry.

Code Implementation Comparison

To apply these wrapping modes in Three.js, you must set the wrapS and wrapT properties of your texture object, and then define how many times the texture should repeat using repeat.set().

Implementing RepeatWrapping

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

// Set both horizontal and vertical wrapping to Repeat
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// Repeat the texture 4 times horizontally and 4 times vertically
texture.repeat.set(4, 4);

Implementing MirroredRepeatWrapping

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

// Set both horizontal and vertical wrapping to MirroredRepeat
texture.wrapS = THREE.MirroredRepeatWrapping;
texture.wrapT = THREE.MirroredRepeatWrapping;

// Repeat the texture 4 times horizontally and 4 times vertically
texture.repeat.set(4, 4);

Summary of Key Differences