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

      2016/03/09

01

Webサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。WebGLコンテンツの制作にあたり、多々あるWebGLライブラリの中でもやはりおすすめはThree JSです。触りやすさや情報の多さでも他のライブラリとは一線を画しており、WebGL初心者でも大変扱いやすいです。
今回はそのThree JSの中でも、花形であるジオメトリー(形状)に関してまとめてみました。と言っても大変たくさんあるので、ジオメトリーの中でもコンストラクタの引数へ数値を指定するだけの簡単な種類のみを2回に分けてご紹介します。

ちなみに現状のバージョンは下記のとおりです。

  • three.js : r73

Three JSのひな形

まずはThree JSを使用して3Dオブジェクトを表示させるひな形を紹介します。使用しているライブラリはjQueryとThree JSです。Three JSに関しては下記サイトよりダウンロードしてきたフォルダから以下の3つを使います。

http://threejs.org/

  • build/three.min.js(Three JS本体)
  • examples/js/Detector.js(WebGL使用可否を調べる為)
  • examples/js/OrbitControls.js(マウスコントロール用)

それでは早速、下記がひな形となるコードです。ただ、今回はジオメトリーの紹介なのでハイライト部分以外はコメントを参考にして軽く流す程度に見ていただければと思います。後日、他の部分の紹介もしていきます。

PlaneGeometry:平面

まずはシンプルな所から。ただの四角い平面です。実際に使用するときはテクスチャを貼り付けて、地面だったり壁として使うことが多いです。

引数

PlaneGeometry(

  • 横幅,
  • 高さ,
  • 横幅のセグメント数:指定無しなら1,
  • 高さのセグメント数:指定無しなら1

)

DEMO

demo01
 

CircleGeometry:円

ただの平面の円です。PlaneGeometoryと同じくテクスチャを貼り付けて、地面として使うことが多いです。第2引数のセグメントを増やすことにより、角のない滑らかな曲線になります。(その分、処理が重くなります。)第3,4引数を指定することにより扇形なども作れます。

引数

CircleGeometry(

  • 半径,
  • セグメント数:指定無しなら8,
  • 弧の始点のラジアン:指定無しなら0,
  • 弧の長さのラジアン:指定無しなら2*Math.PI

)

DEMO

demo02
 

RingGeometry:円盤

CircleGeometoryに穴をあけた円盤状の平面です。あまり使いませんが、例えばサッカーコートのセンターサークルなんかには使えそうです。第3引数を4にすれば四角い枠になります。

引数

RingGeometry(

  • 穴の半径,
  • 半径
  • 円周上のセグメント:指定無しなら8,
  • 幅のセグメント:指定無しなら8,
  • 弧の始点のラジアン:指定無しなら0,
  • 弧の長さのラジアン:指定無しなら2*Math.PI

)

DEMO

demo03
 

BoxGeometry:直方体

直方体・箱型です。そのまま箱型のオブジェクトとして使ったり、モデルを作る前のサンプルとして使います。また内側にカメラを配置して、部屋の内部としても使えます。

引数

BoxGeometry(

  • 横幅,
  • 高さ,
  • 奥行き,
  • 横幅のセグメント数:指定無しなら1,
  • 高さのセグメント数:指定無しなら1,
  • 奥行きのセグメント数:指定無しなら1

)

DEMO

demo04
 

SphereGeometry:球体

球体です。個人的には一番使うことが多いです。地球のテクスチャを貼り付けているサンプルなどをよく見ます。また内側に空の写真などのテクスチャを貼り、カメラをその球の中央に配置して、天球空間の背景として使う事も出来ます。第4~7引数を指定する事によりヘルメット型などにもできます。

引数

SphereGeometry(

  • 半径,
  • 横の円周のセグメント数:指定無しなら8,
  • 縦の円周のセグメント数:指定無しなら6,
  • 横の円周の弧の始点のラジアン:指定無しなら0,
  • 横の円周の弧の長さのラジアン:指定無しなら2*Math.PI
  • 縦の円周の弧の始点のラジアン:指定無しなら0,
  • 縦の円周の弧の長さのラジアン:指定無しなら2*Math.PI

)

DEMO

demo05
 

CylinderGeometry:円柱

かなり汎用性が高いジオメトリーです。上面半径を小さくしてプリン型に、上面と底面の半径を同じにすれば筒や柱として、上面の半径を0にして三角錐にすれば木の上の部分としてなど色々と使えます。また第7,8引数を指定する事により立体的な円グラフも作れそうです。

引数

CylinderGeometry(

  • 上面半径,
  • 底面半径,
  • 高さ,
  • 上面・底面のセグメント数:指定無しなら8,
  • 高さのセグメント数:指定無しなら1,
  • 上面・底面を無くすか(true or false):指定無しなら有(false),
  • 上面・底面の弧の始点のラジアン:指定無しなら0,
  • 上面・底面の弧の長さのラジアン:指定無しなら2*Math.PI

)

DEMO

demo06
 

まとめ

今回は単純な形状の種類のみの紹介でしたが、組み合わせや引数の工夫により様々な用途に使えるのではないでしょうか。普段は2次元でのデザインが主なので、奥行き(Z軸)の考え方に慣れるまで少し大変でした。
次回後編では多角形やドーナツ型など少し変わった形状のものを紹介します。

 - JavaScript Tips, three.js ,