Question

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

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

Answer 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内置材料中的一个。

three.js r.69

Tileable（重复）纹理区域？

1 个答案: