Three.js 三角形(triangle)の作り方

今回は、Three.jsの「三角形オブジェクト」について書きます。

こんな形の三角形の作り方を書いていきます。

横から見ると、

こんなんです。

最初は、コードから書いていきます。
コチラです。

//ジオメトリ（形状）の宣言と生成
var geometry = new THREE.Geometry();

//頂点座標データを追加   
geometry.vertices[0] = new THREE.Vector3(150,0,0);
geometry.vertices[1] = new THREE.Vector3(0,150,0);
geometry.vertices[2] = new THREE.Vector3(0,0,150);

//面指定用頂点インデックスを追加   
geometry.faces[0] = new THREE.Face3(0,1,2);

//マテリアル（材質）の宣言と生成
var material =  new THREE.MeshBasicMaterial({ color: 0x0000ff });
var Triangle =  new THREE.Mesh(geometry,material);

//シーンオブジェクトに追加 
scene.add(Triangle);     

実行すると、こんな感じです。

ここからは上のコードの解説を軽くします。

geometry.vertices[0] = new THREE.Vector3(150,0,0);

この部分で頂点座標データを追加しています。
「vertices」は、Geometryのプロパティの一つで、頂点座標配列のことです。これを使うと、頂点座標を登録できます。

次に、

geometry.faces[0] = new THREE.Face3(0,1,2);

これは、三角形に使用する頂点の番号を指定するためのFace3クラスのインスタンスを生成し、Geometryのプロパティの一つであるfacesに登録しています。

「Face3」クラスは、三角形を描画するための頂点インデックスを生成するためのクラスです。
三角形を描画するなに必要なクラスということです。

Face3のコンストラクタです。

Face3(a,b,c,normal,color,materialIndex);

• a,b,c・・・利用する頂点座標の番号。
• normal・・・法線ベクトルの指定。省略OK。
• color・・・頂点色。省略OK。
• materialIndex・・・Geometryのmaterilsプロパティで利用する配列番号。

Geometryのプロパティのfacesは、面を指定するものです。
解説は、こんなもんかな（笑）

三角形は計算量も軽いので、何かに使えるかもしれません。

---

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！