non vorrei lavorare

2020年度からの小学校プログラミング教育の必修化を親として迎えるブロガーの書く、子供との日常

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年後の記事