Tileable (repeating) regions of textures?

Question

Is it possible to specify rectangular regions of a texture that should repeat across single triangles/quads?

If not, I think I know how I'd write the shader from scratch. But is it possible to add the uniforms, attributes and GLSL code bits to any of the existing three.js materials? (i.e., so I can still use phong, lambert, etc. and apply my edits.)

WestLangley WestLangley · Accepted Answer · 2015-01-12T18:28:37

You want to repeat a sub-region of a texture, but three.js allows for repeating the entire texture.

There is a work-around, however. You will need to tessellate your geometry, and modify its UVs.

Here is how you can do that with PlaneGeometry.

// geometry
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 ); // set the pattern repeat here: it is 4

// reset the uvs to be 0 or 1 for each face
var uvs = geometry.faceVertexUvs[ 0 ];
for( i = 0; i < uvs.length; i += 2 ) {
    uvs[ i ][ 0 ].set( 0, 1 ); // first triangle
    uvs[ i ][ 1 ].set( 0, 0 );
    uvs[ i ][ 2 ].set( 1, 1 );
    uvs[ i + 1 ][ 0 ].set( 0, 0 ); // second triangle
    uvs[ i + 1 ][ 1 ].set( 1, 0 );
    uvs[ i + 1 ][ 2 ].set( 1, 1 );
}

// texture
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0.5, 0.25 ); // set the sub-texture offset here
texture.repeat.set( 0.25, 0.25 ); // set the sub-texture scale here

If you do not like that solution, you can extend one of the three.js built-in materials using the approach described in this SO post.

three.js r.69

Tileable (repeating) regions of textures?

1 Answers