javascript - three.js - 単一の球体に複数のテクスチャ/画像を配置する最良の方法は何ですか?

Question

タイトルにあるように、私は次のようなことをしようとしています: http://taggalaxy.de/ 私は画像を持っています。

ありがとう！

Answer 1

最初に、球体で使用されるデフォルトの UV 座標を変更して、各正方形領域の角が UV 座標 (0,0)、(1,0)、(0,1)、および (1,1) になるようにする必要があります。 . 次に、メッシュを作成するときに、マテリアルに MeshFaceMaterial を使用します。これには、球体で使用するマテリアルの配列が含まれている必要があります。最後に、メッシュのジオメトリ内の面ごとに、配列内のマテリアルの対応するインデックスに materialIndex フィールドを設定する必要があります。関連する質問については、次を確認してください: Three.js - 複数のマテリアル プレーン

編集：以下のサンプルコード

var v00 = new THREE.Vector2(0,0);
var v01 = new THREE.Vector2(0,1);
var v10 = new THREE.Vector2(1,0);
var v11 = new THREE.Vector2(1,1);

var m1 = new THREE.MeshBasicMaterial( {map:  new THREE.ImageUtils.loadTexture('images/background.jpg') } );
var m2 = new THREE.MeshBasicMaterial( { map:  new THREE.ImageUtils.loadTexture('images/special-square.png') } );
var m  = new THREE.MeshFaceMaterial( [m1, m2] );

var g = new THREE.SphereGeometry( 60, 6, 5 );
g.faces[6].materialIndex = 1;
g.faces[7].materialIndex = 1;
g.faceVertexUvs[0][6] = [ v11.clone(), v01.clone(), v10.clone() ] ;
g.faceVertexUvs[0][7] = [ v01.clone(), v00.clone(), v10.clone() ] ;

mesh = new THREE.Mesh( g, m );
scene.add(mesh);

このコードの唯一の問題は、画像が台形のような形になり、対角線の 1 つの近くに少し歪みが生じることです。おそらく、より審美的に満足できる解決策は、球状領域の周りに多数の PlaneGeometry オブジェクトを配置することではないでしょうか? もしそうなら、http: //mrdoob.github.io/three.js/examples/css3d_periodictable.htmlで例のソース コードをチェックアウトします。