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

我想给一个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,2,3 );

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

  this.faces.push( face );

  var uvs = [
    new THREE.UV( 1.0,0.0 ),new THREE.UV( 0.0,1.0 ),new THREE.UV( 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;

通过应用此纹理：

我得到了这个结果：

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

解决方法

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

在某些时候,我们需要尝试透视正确的纹理映射.我已经读过一些关于内插w的内容…但我不确定这会解决你的问题.

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

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

>为这些多边形添加一级曲面细分.>为这些可能的情况设置一个特殊的预校正纹理(使用画布或Photoshop).