Как текстурировать неправильные плоскости сферы?

Я хочу дать каждой грани сферы 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;

Применяя эту текстуру:

texture

Я получил этот результат:

sphere

Что можно сделать, чтобы убрать искажение между красной и зеленой точками? Для полюсов одна вершина используется дважды, но может быть лучше, есть идеи?

7
задан mrdoob 23 August 2012 в 14:34
поделиться