タイトルにあるように、私は次のようなことをしようとしています: http://taggalaxy.de/ 私は画像を持っています。
ありがとう!
タイトルにあるように、私は次のようなことをしようとしています: http://taggalaxy.de/ 私は画像を持っています。
ありがとう!
最初に、球体で使用されるデフォルトの 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で例のソース コードをチェックアウトします。