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

在three.js渲染中，我有一个小纹理，我想重复多次。对于该纹理，有贴图、置换贴图、法线贴图、环境光遮挡贴图和镜面反射贴图。只要重复图案在x方向上为1，在y方向上为1，则图像看起来与预期一样。预计会出现位移

如果重复值大于1，则除置换贴图外，所有贴图都显示为正确缩放。置换贴图似乎不会重复。置换与前一幅图像中所示相同

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

///////////////////////////////////////////////
//为测试添加纹理平面
xRep=1；
yRep=1；
var loader=new THREE.TextureLoader（）；
var tex=loader.load（'images/img.png'）；
tex.wrapps=tex.wrapT=3.RepeatWrapping；
tex.rep.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=3.REPEATWRAPS；
atex.repeat.set（xRep，yRep）；
var dloader=new THREE.TextureLoader（）；
var dtex=dloader.load（'images/img-v003-disp.png'）；
dtex.wrapps=dtex.wrapT=THREE.RepeatWrapping；
dtex.repeat.set（xRep，yRep）；
var sloader=new THREE.TextureLoader（）；
var stex=sloader.load（'images/img-v003-spec.png'）；
stex.wrapp=stex.wrapT=3.RepeatWrapping；
stex.REP.set（xRep，yRep）；
var faceMaterial=新的三点网格材质({
颜色：0xA0A0，
光泽度:30,，
//地图：特克斯，
//地图：特克斯，
//规模:1,，
位移图：dtex，
位移比例：10，
normalMap:ntex，
//正态标度：（1,1），
aoMap:atex，
//AOMAPI强度：1，
镜面映射：stex
//_最后:0
});
面=新的三点网格（新的三点平面几何体（50、50、256、256），
表面材料）；
面位置z=50；
face.receiveShadow=true；
face.castShadow=true；
场景。添加（面）您希望置换贴图重复，但置换贴图在当前版本的three.js中不支持偏移重复值

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

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

使用
PlaneBufferGeometry
，按照以下模式进行操作：

var uvs = geometry.attributes.uv.array;

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

如果在渲染至少一次后更改缓冲区几何体UV，则需要设置：

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

另外，一定要阅读

three.js r.79
一个选项是通过画布从当前贴图创建置换贴图的新图像，同时考虑偏移和重复。如果x和y方向的重复次数不同，则类似于如何进行？例如，如果x重复5次，y重复2次？只需以不同方式缩放x和y-uv组件。没问题。谢谢你的帮助。这个建议看起来不错。还没有时间来测试这一点。一旦它被证实有效，我将点击accept。
mesh.geometry.attributes.uv.needsUpdate = true;