When working with a three.js rendering, I have a small texture that I need to repeat multiple times. This texture includes various maps such as the map itself, a displacement map, a normal map, an ambient occlusion map, and a specular map. Everything looks fine when the pattern is repeated only once in both the x and y directions, showing the expected displacements.
https://i.sstatic.net/RFv0v.png
However, if I increase the repeat values to more than 1, all the maps seem to scale correctly except for the displacement map. It doesn't repeat as expected and remains the same as the previous image.
https://i.sstatic.net/UwaAg.png
Here is a code snippet that demonstrates how these maps are applied to a plane:
///////////////////////////////////////////////
// create a textured plane for testing
xRep = 1;
yRep = 1;
var loader = new THREE.TextureLoader();
var tex = loader.load('images/img.png');
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(xRep, yRep);
var nloader = new THREE.TextureLoader();
var ntex = loader.load('images/img-normal.png');
ntex.wrapS = ntex.wrapT = THREE.RepeatWrapping;
ntex.repeat.set(xRep, yRep);
var aloader = new THREE.TextureLoader();
var atex = aloader.load('images/img-ao.png');
atex.wrapS = atex.wrapT = THREE.RepeatWrapping;
atex.repeat.set(xRep, yRep);
var dloader = new THREE.TextureLoader();
var dtex = dloader.load('images/img-v003-disp.png');
dtex.wrapS = dtex.wrapT = THREE.RepeatWrapping;
dtex.repeat.set(xRep, yRep);
var sloader = new THREE.TextureLoader();
var stex = sloader.load('images/img-v003-spec.png');
stex.wrapS = stex.wrapT = THREE.RepeatWrapping;
stex.repeat.set(xRep, yRep);
var faceMaterial = new THREE.MeshPhongMaterial({
color: 0xa0a0a0,
shininess: 30,
//map : tex,
//bumpMap : tex,
//bumpScale : 1,
displacementMap: dtex,
displacementScale: 10,
normalMap: ntex,
//normalScale : (1,1),
aoMap: atex,
//aoMapIntensity : 1,
specularMap: stex
//_last: 0
});
face = new THREE.Mesh(new THREE.PlaneGeometry(50, 50, 256, 256),
faceMaterial);
face.position.z = 50;
face.receiveShadow = true;
face.castShadow = true;
scene.add(face);Is there a way to modify this code snippet so that the displacement map repeats just like the other maps?
Note: The issue with the displacement map not repeating properly may be related to the discussion in issue #7826 on GitHub.