Comment répéter une carte de déplacement dans trois.js

Question

Dans un rendu de trois.js, j'ai une petite texture que je veux répéter plusieurs fois. Pour cette texture, il y a la carte, une carte de déplacement, une carte normale, une carte d'occlusion ambiante et une carte spéculaire. Tant que le motif répété est 1 dans la direction x et 1 dans la direction y, l'image semble comme prévu. Il y a déplacement là où prévu.

Si les valeurs de répétition sont supérieures à 1, toutes les cartes semblent correctement mis à l'échelle, sauf pour la carte de déplacement. La carte de déplacement ne semble pas être répétée. Le déplacement est le même que celui montré dans l'image précédente.

Un extrait de code pour l'application de ces cartes à un plan suit:

/////////////////////////////////////////////// 
 
// add texture plane for a test 
 

 
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({ 
 
\t \t \t color: 0xa0a0a0, 
 
\t \t \t shininess: 30, 
 
\t \t \t //map    : tex, 
 
\t \t \t //bumpMap   : tex, 
 
\t \t \t //bumpScale   : 1, 
 
\t \t \t displacementMap: dtex, 
 
\t \t \t displacementScale: 10, 
 
\t \t \t normalMap: ntex, 
 
\t \t \t //normalScale  : (1,1), 
 
\t \t \t aoMap: atex, 
 
\t \t \t //aoMapIntensity : 1, 
 
\t \t \t specularMap: stex 
 
\t \t \t  //_last: 0 
 
\t \t \t }); 
 

 
face = new THREE.Mesh(new THREE.PlaneGeometry(50, 50, 256, 256), 
 
\t \t \t faceMaterial); 
 
\t \t \t face.position.z = 50; 
 
\t \t \t face.receiveShadow = true; 
 
\t \t \t face.castShadow = true; 
 

 
scene.add(face);

Comment cet extrait modifié de sorte que la carte de déplacement est répété le même que le d'autres cartes?

Remarque: Ce problème semble être lié à la discussion au issue #7826 sur le hub Git.

Answer 1

Vous souhaitez que votre carte de déplacement se répète, mais la carte de déplacement n'honore pas la valeur de répétition de décalage dans la version actuelle de three.js.

Une solution consiste à modifier les UV de votre géométrie. Supposons que vous souhaitez que la carte de déplacement soit répétée 3 fois. Ensuite, multipliez vos UVs par 3.

En utilisant PlaneBufferGeometry, suivez ce modèle pour le faire:

var uvs = geometry.attributes.uv.array; 

for (var i = 0; i < uvs.length; i ++) uvs[ i ] *= 3; 

Pour les autres textures, si vous vouliez, vous pouvez compenser en escaladant leurs repeat valeurs en conséquence:

texture.repeat.set(1/3, 1/3); 

Si vous modifiez les UVs de géométrie tampon après avoir rendu au moins une fois, vous devrez définir:

mesh.geometry.attributes.uv.needsUpdate = true; 

En outre, veillez à lire this post.

Three.js R.79