Three.js: How do I scaling and offset my image textures?

Question

How do I scaling and offset my image textures?

My image dimensions is 1024px x 1024px.

var textureMap = THREE.ImageUtils.loadTexture( 'texture.png' );

Answer 1

Have a look at [this documentation][https://threejs.org/docs/#api/en/textures/Texture]:

.repeat - How many times the texture is repeated across the surface, in each direction U and V.

.offset - How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.

.wrapS - The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.

.wrapT - The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.

NOTE: tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not Three.js.

Example of scale:

// scale x2 horizontal
texture.repeat.set(0.5, 1);
// scale x2 vertical
texture.repeat.set(1, 0.5);
// scale x2 proportional
texture.repeat.set(0.5, 0.5);

Answer 2

Offset with texture.offset.set(u, v); where u and v are percents (e.g. 0.67).

There's not a specific scale method, but it's basically the arguments to .repeat(): texture.repeat.set(countU, countV). Smaller numbers will scale bigger: consider fitting 2 vs fitting 20 across the same axis.