三个 js 几何 UV 不映射

Question

我只是想将加载的纹理应用到网格上，并在加载网格后为每个面使用不同的UV坐标。我相信我已经遵循了所有必要的步骤，但我没有得到预期的结果。

首先，我指定纹理坐标：

top_texture_uv = [new THREE.Vector2(0,0), new THREE.Vector2(8,0), new THREE.Vector2(8,8), new THREE.Vector2(0,8)];
side_texture_uv = [new THREE.Vector2(0,0), new THREE.Vector2(4,0), new THREE.Vector2(4,2), new THREE.Vector2(0,2)];

我希望这些面孔重复不同的时间。

然后，我加载纹理并更新几何体的面顶点，如指定的文档所示。

var txLoader = new THREE.TextureLoader();
txLoader.load(
'textures/checker.gif',
function ( texture ) {
ground_segment.mesh.material.map = texture;
//texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
ground_segment.mesh.geometry.faceVertexUvs[0] = [];
ground_segment.mesh.geometry.faceVertexUvs[0][0] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][1] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][2] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][3] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][4] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][5] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][6] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][7] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][8] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][9] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][10] = [top_texture_uv[0], top_texture_uv[1], top_texture_uv[3]];
ground_segment.mesh.geometry.faceVertexUvs[0][11] = [top_texture_uv[1], top_texture_uv[2], top_texture_uv[3]];

ground_segment.mesh.geometry.uvsNeedUpdate = true;
ground_segment.mesh.material.needsUpdate = true;
}
);

映射面顶点似乎没有效果。

这样做是行不通的，因为它只是获取加载的纹理并映射它，而不会在对象的每个表面上重复，这不是我想做的。如何使几何图形反映我想要的 UV 坐标变化？

Answer 1

您正在使用THREE.Geometry，并希望在渲染几何体后更新 UV。

不要像这样重新分配数组：

mesh.geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ] = new THREE.Vector2( u, v ); // invalid

请改用此模式：

mesh.geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].copy( uv ); // or .set( u, v )
mesh.geometry.uvsNeedUpdate = true; // required only if geometry has been rendered

三.js R.84