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

映射facevertices似乎没有效果。

这样做不起作用，因为它只是采取加载的纹理并映射它而不重复对象的每个面，这不是我想要做的。如何使几何体反映出我想要的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

three.js r.84

三个js几何UV未映射

1 个答案: