如何在three.js中重复位移贴图

Question

在three.js渲染中，我有一个小的纹理，我想多次重复。对于这种纹理，有地图，位移图，法线贴图，环境遮挡贴图和高光贴图。只要重复模式在x方向上是1，在y方向上是1，图像就像预期的那样。有预期的位移。

如果重复值大于1时，所有的地图的显示为正确缩放除了位移图。位移图似乎没有重复。位移与前一张图片中显示的相同。

用于施加这些映射到平面A的代码段如下：

/////////////////////////////////////////////// 
 
// 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);

如何这个片段被修改，从而置换图重复相同的其他地图？

注意：此问题似乎与Git集线器上的issue #7826的讨论有关。

Answer 1

您想要重复位移贴图，但位移贴图不符合当前版本的three.js中的偏移重复值。

解决方法是修改几何图形的UV。

假设您想要位移贴图重复3次。然后，通过3

使用PlaneBufferGeometry乘以你的UV，遵循这个模式可以这样做：

var uvs = geometry.attributes.uv.array; 

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

对于其他的纹理，如果你愿意，你可以通过相应地按比例其repeat值补偿：

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

如果您在渲染后至少一次改变缓冲几何图形的UV，你将需要设置：

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

此外，请务必阅读this post。

three.js所r.79