Three.jsでポリゴンを描画するには

Three.jsを始める

以前の記事でJavaScriptゴリゴリは気が進まない旨の事を書きましたが。
Processing.jsではvertexでポリゴンを描画してもライティングが反映されません。

そんな訳で、Three.jsに手を出しました。

ところが、サンプルがスゴ過ぎて、単純にポリゴンを描画する方法が見つからず苦労しました。（人の頭とか描画するデモではローダー使って座標データを読み込んでいる。）

この記事ではその際にトライアンドエラーで学んだ成果をメモします。
カメラの設定等は省略します。そこらへんはgeometriesのサンプルで分かるので。

まずは、THREE.Geometryを作成します。

var geom = new THREE.Geometry();

THREE.Vector3を座標指定して作成します。

var v1 = new THREE.Vector3(0, 0, 0);

var v2 = new THREE.Vector3(1, 0, 0);

var v3 = new THREE.Vector3(1, 1, 0);

既に作成済みのTHREE.Geometryオブジェクトのverticesに作成した頂点を追加します。

geom.vertices.push(new THREE.Vertex(v1));

geom.vertices.push(new THREE.Vertex(v2));

geom.vertices.push(new THREE.Vertex(v3));

登録した頂点の番号を指定してTHREE.Face3もしくはTHREE.Face4を作成します。

var face1 = new THREE.Face3( 0, 1, 2 );

ココで、頂点の指定を時計回りなり、反時計回りで統一しておきます。

外積使うなりして法線ベクトルを算出し、THREE.Vector3を作成します。

var faceNormal = new THREE.Vector3( 0,0,1 );

作成したTHREE.Vector3オブジェクトをTHREE.Face3オブジェクトに登録します。

face1.normal = faceNormal;

作成した面をTHREE.Geometryオブジェクトに追加します。

 geom.faces.push( face1 );

テクスチャを貼らない場合、この処理は不要です。

geom.faceVertexUvs[ 0 ].push( [
		new THREE.UV( 0,0 ),
		new THREE.UV( 1,0 ),
		new THREE.UV( 1,1 )  ] );

Amazon.co.jp ウィジェット

テクスチャの設定や、反射率等はサンプル見れば色々あります。