纹理的平铺（重复）区域？答案

【问题标题】：Tileable (repeating) regions of textures?纹理的平铺（重复）区域？
【发布时间】：2015-03-10 12:20:21
【问题描述】：

是否可以指定应该在单个三角形/四边形中重复的纹理矩形区域？

如果不是，我想我知道如何从头开始编写着色器。但是是否可以将制服、属性和 GLSL 代码位添加到任何现有的 three.js 材料中？（即，我仍然可以使用 phong、lambert 等并应用我的编辑。）

【问题讨论】：

标签： three.js

【解决方案1】：

你想重复一个纹理的子区域，但是three.js允许重复整个纹理。

但是，有一个解决方法。您需要细分几何体，并修改其 UV。

下面是使用PlaneGeometry 的方法。

// geometry
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 ); // set the pattern repeat here: it is 4

// reset the uvs to be 0 or 1 for each face
var uvs = geometry.faceVertexUvs[ 0 ];
for( i = 0; i < uvs.length; i += 2 ) {
    uvs[ i ][ 0 ].set( 0, 1 ); // first triangle
    uvs[ i ][ 1 ].set( 0, 0 );
    uvs[ i ][ 2 ].set( 1, 1 );
    uvs[ i + 1 ][ 0 ].set( 0, 0 ); // second triangle
    uvs[ i + 1 ][ 1 ].set( 1, 0 );
    uvs[ i + 1 ][ 2 ].set( 1, 1 );
}

// texture
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0.5, 0.25 ); // set the sub-texture offset here
texture.repeat.set( 0.25, 0.25 ); // set the sub-texture scale here

如果您不喜欢该解决方案，您可以使用this SO post 中描述的方法扩展三个内置材料之一。

three.js r.69

【讨论】：

是的，我想重复子区域，但不想增加模型复杂度。理想情况下，通过 vec4 统一数组指定着色器的区域列表并包含 regionIndex 属性。然后在片段着色器中使用一些偏移/模数算法。将研究使用 ShaderChunks。