non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は?

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

Three.jsを始める

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

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

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オブジェクトに追加

既に作成済みの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 )  ] );

あとは、Materialを作成してnew Three.Meshして完成!

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

サンプルw

トーラスのなかを進む テクスチャ版 - jsdo.it - share JavaScript, HTML5 and CSS

関連記事

1年前の記事

7年後の記事