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