如何纹理球体的不规则平面？

Question

我想给THREE.js球体的每个面部赋予它自己的纹理。所以我让SphereGeometry计算顶点并使用面的顶点将每个面转换为PlaneGeometry。

THREE.SpherePlaneGeometry = function ( v1, v2, v3, v4 ) {

  THREE.Geometry.call( this );

  var normal = new THREE.Vector3( 0, 1, 0 );

  this.vertices.push( v1.clone() );
  this.vertices.push( v2.clone() );
  this.vertices.push( v3.clone() );
  this.vertices.push( v4.clone() );

  var face = new THREE.Face4( 0, 1, 2, 3 );

  face.normal.copy( normal );
  face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );

  this.faces.push( face );

  var uvs = [
    new THREE.UV( 1.0, 0.0 ),
    new THREE.UV( 0.0, 0.0 ),
    new THREE.UV( 0.0, 1.0 ),
    new THREE.UV( 1.0, 1.0 ),
  ];
  this.faceVertexUvs[ 0 ].push( uvs );

};

确保以后使用返回的几何体运行所有这些：

geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.verticesNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.dynamic = true;

通过应用此纹理：

我得到了这个结果：

如何消除红点和绿点之间的失真？对于极点，一个顶点使用两次，但它可能更好，任何想法？

Answer 1

这是一个棘手的问题。我们的纹理映射仍然是仿射的。

在某些时候，我们需要尝试透视正确的纹理贴图。我已经阅读过关于内插w的某些内容...但我不确定这会解决您的问题。

为了简化问题...查看纹理映射图像中的仿射映射四边形。想象一下，您将左上顶点移动到右上角。通过这样做，您基本上将左三角形变为从左下角到右上角的简单线条。这基本上意味着你不会看到它。由于直角三角形的顶点尚未移动，因此三角形仍然存在，可见，并且UVs分配给每个顶点。

所以我能想到的唯一解决方案是：

1. 为这些多边形添加一级曲面细分。
2. 针对这些可能的情况，使用特殊的预校正纹理（使用画布或Photoshop）。

Answer 2

这里有几个问题。

首先，除非出于某种原因，否则不需要将几何体的每个面转换为平面几何体。您可以在下面的小提琴中看到如何处理它。

其次，你的问题是你的紫外线设置。

这是一个小提琴（http://jsfiddle.net/PBjEE/），显示与您类似的问题。我使用了更简单的几何体，但与你的一样，四边形面是梯形。在小提琴中，我按照你的方法设置每个面的UV作为纹理的角，（0,1），（0,0），（1,0）和（1,1）。结果是一个扭曲的圆圈。

这是另一个小提琴（http://jsfiddle.net/PBjEE/1/），通过改变UV坐标来消除失真。

UV坐标必须定义一个与脸部具有相同比例的梯形。