How to repeat texture on z-axis in three.js?

Questions
,
1

In three.js I want to create a road. I have this

var width = 5;
var length = 4;
var height = 1;
var geometry = new THREE.BoxGeometry( width, length, height );
var textureloader = new THREE.TextureLoader();
var texture = textureloader.load('images/tile_brick.png', function(tx) {
    var material = new THREE.MeshBasicMaterial({
        map: tx,
        wireframe: false
    });        
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
});
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( width, length );

and it ends up looking like this

It repeats on x axis 5 times which is good, it repeats 4 times on y axis which is good, but for z axis it is also repeating 4 times which is bad because it is getting compressed, I want it to repeat 1 times there.

Does anyone know how to fix it?

Thanks

PNG
PNG721×548 76.4 KB

2

This can not be fixed by setting wrapS and wrapT. The texture coordinates of each side lie in the range [0,1]. If you apply a value to wrapS and wrapT, it affects all sides of the cube. Also keep in mind that texture coordinates and the respective repeat configuration are two-dimensional here.

For your use case, it’s best to author the texture coordinates in a DCC tool like Blender.

2 Likes
3

Maybe you could use this one too:

A texture is 2D

https://threejs.org/docs/index.html#api/en/textures/Texture
https://threejs.org/docs/index.html#api/en/loaders/TextureLoader

If you texture a box, you can use CubeTextureLoader.
https://threejs.org/docs/index.html#api/en/loaders/CubeTextureLoader
:slightly_smiling_face: