8

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;

このテクスチャを適用すると:

テクスチャー

私はこの結果を得ました：

球体

赤点と緑点の間の歪みを取り除くにはどうすればよいでしょうか? 極の場合、1 つの頂点が 2 回使用されますが、もっと良い方法があるのではないでしょうか?

4

2 に答える 2

3

これは難しい問題です。テクスチャマッピングはまだアフィンです。

何とか

ある時点で、遠近法による正しいテクスチャマッピングを試す必要があります。補間についてどこかで読んだことがありwますが、これで問題が解決するかどうかはわかりません。

問題を単純化するために...テクスチャマッピング画像のアフィンマッピングされたクワッドを見てください。左上の頂点を右上に移動するとします。そうすることで、基本的に左の三角形を左下から右上に向かう単純な線に変えることになります。これは基本的に、表示されないことを意味します。直角三角形の頂点は移動されていないため、三角形はまだそこにあり、表示されており、各頂点にUVが割り当てられています。

したがって、私が考えることができる唯一の解決策は次のとおりです。

  1. これらのポリゴンに1レベルのテッセレーションを追加します。
  2. これらの可能性のあるケースのために、特別な事前修正されたテクスチャ（キャンバスまたはフォトショップのいずれかを使用）を用意します。
于 2012-08-23T14:34:13.870 に答える
2

ここにはいくつかの問題があります。

まず、何らかの理由がない限り、ジオメトリの各面を平面ジオメトリに変換する必要はありません。以下の Fiddles でこれを処理する方法を確認できます。

次に、問題は UV 設定です。

これは、あなたと同様の問題を示すFiddle ( http://jsfiddle.net/PBjEE/ ) です。私はより単純なジオメトリを使用しましたが、あなたのものと同様に、クワッド フェースは台形です。フィドルでは、各面の UV をテクスチャのコーナー (0,1)、(0,0)、(1,0)、および (1,1) に設定するアプローチに従いました。その結果、歪んだ円になります。

これは、UV 座標を変更することによって歪みが除去される別の Fiddle ( http://jsfiddle.net/PBjEE/1/ ) です。

UV 座標は、顔と同じ比率の台形を定義する必要があります。

于 2012-08-26T20:45:03.823 に答える