如何在three.js中重复置换贴图

Question

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

如果重复值大于 1，则除置换贴图外，所有贴图都显示为正确缩放。置换贴图似乎没有重复。位移与上图相同。

将这些地图应用于平面的代码 sn-p 如下：

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

如何修改这个 sn-p，使置换贴图与其他贴图一样重复？

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

Answer 1

您希望置换贴图重复，但置换贴图不支持当前版本的 three.js 中的偏移重复值。

一种解决方法是修改几何体的 UV。

假设您希望置换贴图重复 3 次。然后，将你的 UV 乘以 3。

使用PlaneBufferGeometry，遵循以下模式：

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