3

Three.js を使用して単純な 2D シーンを作成する際に問題が発生しています。色付きの三角形で 2D ビューを作成したいと思います。三角形に色を付けることができません (例: 赤)。そのためには、次のものが必要になると思います。

  • THREE.OrthographicCamera
  • 単純な三角形 -> すなわち THREE.Geometry() は赤色で表示されます

影は必要ありません。正投影シーンに単純な赤い 2D 三角形だけが必要です。作成方法に関する提案は大歓迎です。

4

1 に答える 1

4

ベース Geometry クラスを使用する場合は、独自の頂点をすべてシーンに追加する必要があります。次のように頂点クラスでこれを行うことができます

var geometry = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);   // Vector3 used to specify position
var v2 = new THREE.Vector3(1,0,0);
var v3 = new THREE.Vector3(0,1,0);   // 2d = all vertices in the same plane.. z = 0

// add new geometry based on the specified positions
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);

次に、頂点から面を構築する必要があります。頂点のインデックスを、上にプッシュされた順序で渡します。

[編集]: mrdoob が以下で指摘しているように、反時計回りに追加する必要もあります。

ここに画像の説明を入力

これは私のフィドルの問題でした。ここで固定デモを表示できます。

geometry.faces.push(new THREE.Face3(0, 2, 1));

最後にマテリアルを作成し、それをジオメトリと組み合わせてメッシュを作成します。2D の場合でも、これを表示するにはメッシュを作成する必要があると思います。

var redMat = new THREE.MeshBasicMaterial({color: 0xff0000});
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle)                               // added at the origin
于 2012-06-13T20:35:49.323 に答える