使用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