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

Question

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何修改此代码段以使置换贴图重复与其他贴图相同？

注意：此问题似乎与Git中心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