3D

【JavaFX・3D】旗の「波」を再現するプログラムを解説

完成図

アメリカ合衆国の国旗が揺れています。

これは「MeshView」クラスを用いて再現されたもので、あらかじめ用意されたOBJファイルを読み込んだものではありません。

今回は3Dのオブジェクトで波を表現する方法をプログラムと共に解説していきます。

考え方

まず、「MeshView」クラスを用いたオブジェクト作成の考え方についてです。

「MeshView」クラスでは、「TriangleMesh」クラスで設定された情報を元にオブジェクトを組み上げます。基本的には三角形の組み合わせです。

 

次にアメリカ合衆国の国旗の画像を貼り付ける方法ですが、これは「MeshView」にマテリアルを登録した上で、「TriangleMesh」にテクスチャーの座標情報を登録した後、フェイスの情報を与えることで実現できます。

 

波を再現するには

波は「sinカーブ」で再現します。X・Z座標の値に応じて「θ(角度)」が変化するようにし、「sinカーブ」を定義します。

この時、「sinカーブ」の値が適用されるのは「Y座標」のみになります。

プログラム

それでは実際にプログラムを組んでいきます。また、このプログラムでは波の様子がよくわかるように、マウスでの回転処理も加えています。

(Main.java)

結果

キーを押して旗が揺れている様子も見てみましょう。

解説

「TriangleMesh」に対する情報登録は3つに分けられます。

 

1つ目は頂点座標登録。

X・Y・Z座標の3つを「幅×高さ」分用意します。

 

2つ目はテクスチャ座標登録。

テクスチャ座標は「0〜1」までの小数点の値を登録します。

この際必要な情報はV・U座標で表された四隅の座標の「幅×高さ」分になります。

つまり、画像内のパーツを四隅の座標を指定することで登録するのです。

 

3つ目はフェイス情報登録。

フェイス情報は頂点座標とテクスチャ座標を結びつける大事な情報となります。

基本的には「頂点座標・テクスチャ座標」で1つの頂点を表し、それを3つ登録します。

ちなみに登録する値は、頂点やテクスチャ座標に割り当てられた識別番号となります。

図にするとわかりやすいと思います。(座標の値は適当です。)

頂点座標は「X・Y・Z」座標の3つ区切りで進みます。

テクスチャ座標は4隅分の「V・U」座標の2つ区切りになります。

このように、割り当てられた識別番号を関連づけることで三角形が形成されるので、その三角形を2つ組み合わせて正方形を形作ります。

これを何個も何個もつなぎ合わせたものが、旗となるのです。


【筆者オススメ!】
↓Javaをさらに勉強したい方へ(スポンサーリンク)



↓JavaFXをさらに勉強したい方へ(スポンサーリンク)

↓3Dプログラミングをさらに勉強したい方へ(スポンサーリンク)
ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。