Three JS:dat.GUIを使ってTorusKnotGeometryを極めてみる

      2016/03/09

前回のジオメトリー紹介では複雑なTorusKnotGeometryのプロパティがいまいち理解できませんでした。なので今回はブラウザ上でプロパティの値を動的に変更できるdat.GUIを使用して、理解度を深めようと思います。

前回の記事:Three JS:基本の使い方総まとめ-ジオメトリー後編-

ちなみに現状の各ライブラリのバージョンは以下の通りです。

  • three.js: r74
  • jQuery:1.9.1

dat.GUIとは

dat.GUIとはJavaScript内の値をブラウザ上のパラメーターで変更することにより、動的に反映させることの出来るJavaScriptライブラリです。Three JS公式サイトのデモページでもよく使われているツールです。

使い方自体はシンプルですのでdat.GUI公式サイトを参考にして下さい。この公式サイトからもダウンロードは出来ますが、Three JSに付属していますのでそちらを使いましょう。

Three JSダウンロード:http://threejs.org/

場所はexamples/js/libs/dat.gui.min.jsです。
簡単に使い方を説明します。

まずはパラメーター用のデータを保持するコンストラクタを作成します。

先ほどのコンストラクタからインスタンスを生成し、操作したいパラメーターのフォルダ(タブ)と紐付けます。

変更があった時のイベントを作ります。すでに生成したインスタンスにはパラメーターで変更した値が反映されていますので、あとは変更したい値に代入すれば完了です。

DEMO

何はともあれ、まずはデモをご覧ください。
それでは早速下の画像をクリック!!右上のタブを選ぶとパラメーターが表示されます。それこそがdat.GUIなのです。色々といじって値を変更してみてください。

01

TorusKnotGeometryを理解する

前回はいまいち掴めなかったTorusKnotGeometryもdat.GUIを使用することにより、視覚的に理解することが出来そうです。
ちなみにTorusKnotGeometryの各プロパティは以下の通りです。

  • radius:半径,
  • tube:管の太さ,
  • radialSegments:円周のセグメント数
  • tubularSegments:管周りのセグメント数
  • p:周回数
  • q:管のねじれ,
  • heightScele:高さのスケール

p,qを変化させることにより、とても面白い形状になりました。私のお気に入りはこのデリシャスプレッツェル型!!

02

ソースコード

念の為、今回使用したソースコードを掲載いたします。使用しているライブラリはjQueryと、Three JSからは以下のファイルを読み込んでいます。

ファイル名 場所 役割
three.min.js /build/ Three JSメインファイル
Detector.js /examples/js/ WebGL環境確認
OrbitControls.js /examples/js/controls/ マウスコントロール用
dat.gui.min.js /examples/js/libs/ dat.GUIパラメーター用

ハイライト箇所に注意してください。今回はジオメトリーのプロパティを変化させたいのですが、Three JSで用意されているジオメトリー各種のプロパティの値は動的に変化させることは出来ません。なので一度despose();で破棄してから、新しくジオメトリーを生成して、再度メッシュに入れ込んでおります。

まとめ

3Dの描画はとても複雑で、コードだけでは理解できない事も多いです。なので今回紹介したdat.GUIは視覚的に理解できるので開発段階で大変役に立ちます。カメラの位置やライトの設定、マテリアルの色変更などなどどんなプロパティでも紐付けられるのでこれからどんどん使っていこうと思います。
もちろんdat.GUIはThree JS専用のものではないので、色んなライブラリと組み合わせられます。何となくAngular JSを彷彿させますね。

 - JavaScript Tips, three.js ,