使用UV映射在PlaneGeometry上将纹理旋转45度

Question

我试图将旋转的纹理映射到PlaneGeometry上。

基本上，我有一个44x44的菱形纹理，如下所示：

我想使用UV将图像中的菱形映射到我的平面几何体上。这是否可以使用Three.js？本质上，将texel（0,22）映射到uv（0,0），texel（22,0）到uv（1.0,0），依此类推？

以下是我使用的代码：https://jsfiddle.net/mxLt0bun/2/

  geometry = new THREE.PlaneGeometry(1, 1);

  texture = loader.load("https://i.imgur.com/DPZiMyK.png")
  texture.minFilter = THREE.NearestFilter;
  texture.magFilter = THREE.NearestFilter;

  material = new THREE.MeshBasicMaterial({
    map: texture
  });
  mesh = new THREE.Mesh(geometry, material);

  // draw edges
  var geo = new THREE.WireframeGeometry(mesh.geometry);
  var mat = new THREE.LineBasicMaterial({
    color: 0x00FF00,
    linewidth: 1
  });
  var wireframe = new THREE.LineSegments(geo, mat);
  mesh.add(wireframe);

  scene.add(mesh);

Answer 1

您可以像这样修改几何体的UV：

geometry = new THREE.PlaneGeometry( 1, 1 );

geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 1.0 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].set( 0.5, 0.0 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].set( 1.0, 0.5 );  

BufferGeometry效率更高。你也可以使用它。

geometry = new THREE.PlaneBufferGeometry( 1, 1 );

geometry.attributes.uv.setXY( 0, 0.5, 1.0 );
geometry.attributes.uv.setXY( 1, 1.0, 0.5 );
geometry.attributes.uv.setXY( 2, 0.0, 0.5 );
geometry.attributes.uv.setXY( 3, 0.5, 0.0 );

three.js r.83