3D

【Java・3D】2×2×2のルービックキューブを作ろう!【Part1/5】

完成品

まずは完成品を見て、どんなものなのかを確かめてみよう!

雛形プログラムを作成

まずは、ライトとカメラを作成する雛形プログラムを作成していきます。

(Main.java)

真っ白なウィンドウ(600×600)が出てきたと思います。

これはあくまでも雛形プログラムですので、技術的な部分はありません。

ただ、今回作成していくルービックキューブは、この雛形を基に作成されていくので、カメラの位置は特に間違えないようにしましょう。

 

立方体を描画する

ルービックキューブは立方体の集まりです。

なので、その立方体をまずは1つ描画してみましょう。

JavaFXには「Box」というクラスがあり、それを用いれば簡単に立方体は描画できるのですが、それをやってしまうとで非常に面倒臭いことになってしまうので、今回は「MeshView」クラスを用いたやり方で描画していきます

 

考え方

まず、考えたを抑えておきましょう。

「MeshView」クラスはそもそも、「TriangleMesh」クラスで設定された頂点座標・テクスチャ座標・フェイス情報の3つ大きな情報を基に作成されるものになります。

なので、その3つの情報がなにを示すのかを知っておく必要があります。

頂点座標

これはそのままですね。

赤い数字で示した部分が頂点座標となります。

立方体の場合は図の通り8つありますね。

 

テクスチャ座標

テクスチャ座標は、画像領域内での座標となります。

テクスチャ座標は必ず「0〜1」の間の数値になります。

今回図示しているこの画像は3×3で区切られていますが、その理由は、今回使っていくテクスチャ画像にあります。

これが今回使用していくテクスチャ画像です。

見ての通り、ルービックキューブで使用する6種類と、見えない部分の黒色の計7種類の色が用意されており、3×3で区切られているのがわかると思います。

フェイス情報

フェイス情報は、このように3の頂点番号を結んで三角形を作り、それを組み合わせていくものです。

1面は三角形2個を使って表しています。

なので上記の画像では、合計で2×6面で12個の三角形があることになります。

TriangleMeshを作成

「TriangleMesh」クラスを継承した「MyMesh」クラスを作成します。

「MyMesh」クラスでは、コンストラクタに各面で使用する色を指定できるようにします。

(Main.java)

MeshViewを描画

「MeshView」クラスのコンストラクタの引数には「TriangleMesh」が入ります。

なので先ほど作成した「MyMesh」クラスを作成した上で、それを引数に指定します。

(Main.java)

マウスによる回転操作

マウスによる回転は、マウスカーソルのScene内でのX・Y座標を使って求めていきます。

とはいっても、式は簡単です。

元の回転角度からマウスカーソルの移動距離を引いたものを、新しい回転角度として設定するだけです。

(Main.java)

 

次回

【Java・3D】2×2×2のルービックキューブを作ろう!【Part2/5】 前回 https://itech-program.com/?p=1995 ルービックキューブ(2×2×2)を作成...
ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です