Three JS:Geometryでオリジナルの形状を作ってみる

      2016/03/25

今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回は下のようなただの八面体の作り方を説明します。

geometry_sample

Geometryとは

3D空間の中の物体は基本的に頂点(vertice)とその頂点を繋げた三角形の面(face)の集合で成り立っています。three.jsのプリセットに含まれているTorusKnotGeometry(輪環結び目)のような複雑な形状のものも同じく、ワイヤーフレームを表示させてみると三角形の集合だと言う事が分かります。

geometry0

その頂点と三角形の面を一つ一つ指定して一つのGeometryが形成されます。

Geometryを作ってみる

それでは早速、自作でのGeometryの形成の仕方を説明します。

まずはnew THREE.Geometry()によりGeometryのインスタンスを生成します。

生成したインスタンスのverticesプロパティ(配列)に頂点座標を追加していきます。座標はnew THREE.Vector3(x, y, z)で指定します。

facesプロパティ(配列)に先ほど追加した頂点座標を3つ指定して、三角形の面を一つずつ作ります。八面体なので八つの面が必要です。指定の仕方はnew THREE.Face3()の引数にvertices配列に入れた頂点のインデックス値を渡します。この時の引数の順番が右回りか左回りかで面の表裏が決まるため統一して指定しましょう。

少し分かりにくいかと思うので下の図を参考にしてください。最初にfaces配列に追加しているのが、0と2と1の頂点を繋げた右下の面です。

geometry01

最後に面の向きを指定する法線ベクトルを指定するのですが、three.jsでは自動計算してくれるメソッドが用意されているのでそれを使いましょう。これにより光の反射・拡散の方向などが決まります。

メッシュを作成して表示させてみる

形成したGeometryをメッシュに入れ込み表示させてみましょう。ここからは特に変わったことはなく、プリセットのGeometryを表示させるときと同じです。形状を分かりやすくするためワイヤーフレームのみのメッシュも一緒に表示させます。

マテリアルにMeshNormalMaterialを使うことにより各面の法線ベクトルの向きが分かりやすくなります。テスト用に使うと便利です。実際はコメントアウトしてあるMeshPhongMaterialなどを使うことになるでしょう。

geometry01_normal

さらに下記のメソッドを使うとシェーディングが滑らかになるようです。

geometry01_normal02

念の為、コード全体を掲載しておきます。下記コードをこのまま使う場合はthree.jsの他にDetector.jsOrbitControls.jsを読み込んでおく必要があります。

まとめ

今回は基礎の基礎と言う事でただの八面体でしたが、この程度でしたらプリセットのOctahedronGeometryを使えば事足ります。ただ今後プログラミングにて様々な形状を作っていく上で必要な知識との事でおさらいしました。今後複雑な形状の作り方や動的な形状の変化、ジェネラティブアートのような事もしていきたいと思います!

 - JavaScript Tips, three.js , ,