WebGLライブラリThree.jsの基礎と照明(Light)色々。


はじめに

WebGLとは
3Dモデリングの開発ソフト等に使用される3次元コンピュータグラフィックスAPIのOpenGLをJavaScriptとバインディングしてWebブラウザに適応した技術。そのまま弄るのは少し敷居が高い。
Three.js
敷居の高いWebGLを少しの3D知識とJavaScriptの知識で簡単に記述出来るようにしてくれる素敵ライブラリ。Babylon.js等他にもライブラリは沢山あるけど多分シェアと取っつき易さは1番。

バージョンアップにドキュメンテーションの更新も一部追いついていないみたいなのでドキュメンテーションを見ながらでも一部混乱した部分があったので備忘録。

  1. Three.jsの基本的な使い方
  2. ジオメトリマテリアルの種類
  3. 照明(Light)の種類

Three.jsの基礎

処理の流れ

  1. HTMLファイルの作成
  2. シーンを追加
  3. カメラの追加
  4. 物体の追加
  5. シーンのレンダリング

まずは出力するための土台となるHTMLを書きます。

各種ライブラリの読み込みとjQueryを使い慣れている人は併用も可能

続いてThree.js公式サイトから最新版のThree.js(2015/11月現在r73)をダウンロード。

ファイル内のBuildフォルダの中にThree.jsの本体があるので任意のディレクトリに移動。

examplesフォルダの中には色々なプラグインが入っているので以下の3ファイルも任意の場所に移動します。

examples->js->controls->Orbitcontrols.js
examples->js->libs->dat.gui.min.js
examples->js->libs->stats.min.js

練習用なのでbodyの中にアペンド用のdivタグが1つあればOK。

次に実際の処理。

まずScene(場面)とCamera(視点)を追加。

レンダリングするまで何を書いても出力されないので、先にレンダリング処理を行う。

ここまでの処理が最低限の土台。

ジオメトリ、マテリアルの種類

続いて物体を追加、流れは以下の通り

  1. ジオメトリ(図形)の作成
  2. マテリアル(表面)の作成
  3. 位置や回転率を設定
  4. シーンに追加

Three.jsではBlender等で作成したobjやjson,dae形式の3Dファイルの読み込みにも対応していますが、基本的なジオメトリはそのまま追加可能です。

Geometry一覧
※リンク先はドキュメンテーションでサンプルを見れます。

2D

PlaneGeometry
四角形

CircleGeometry

RingGeometry

3D

BoxGeometry
立方体

SphereGeometry
球体

TorusGeometry
トーラス(ドーナツ型)

TorusKnotGeometry
トーラス結び目

CylinderGeometry
多角柱(radiusSegmentsを増やすと実質円柱)

TetrahedronOctahedronGeometryDodecahedronGeometryIcosahedronGeometry
三角錐(三面体)、八面体、十二面体、二十面体、

TextGeometry
文字(要TextGeometry.js&フォントJSファイル読み込み)

基本的なマテリアル一覧

MeshBasicMaterial
光を一切反射しないのっぺりマテリアル

MeshPhongMaterial
光沢のあるマテリアル

MeshLambertMaterial
光沢の無い光を反射するマテリアル

3Dモデリングの基礎で使用するのは大抵この3種類。

コーディングは以下。

ここまでの処理を出力するとこんな感じ。

See the Pen MaNKmP by Yuya Saito (@U-YA) on CodePen.

照明を設定していない状態Besicマテリアルを使用すると影絵のような物体しか表示されず3Dっぽくありません。

照明の設定

続いて照明(Light)の設定を行います。

Three.jsには基本5種類の照明があります。

Ambient light
シーン全体を全方向から照らす照明です。
物理的にはほぼあり得ない照明なので照明というよりはシーン全体基本色と考えたほうが合点が行くと思います。
引数はHex(色)のみ。

Directional light
対象物の全体を1方向から照らす照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)をとります。

Spot light
スポットライト。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にAngle(絞り具合)、第五引数にExponent(ターゲットの方向からの光の弱まり具合)、第六引数にDecay(拡散による光の弱まり具合)をとります。

Point light
裸電球のようにその場で全方向に拡散する照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にDecay(光の弱まり具合)をとります。

Hemisphere light
Point Lightと似たような特性だが上半分(skyColor)と下半分(groundColor)で別の色を設定できる照明。
第一引数にはskyColorのHex、第二引数にはgroundColorのHexをとります。

上記の通りBasicマテリアルでは光の反射は見えないのでBasic以外のマテリアルを使用。

ドキュメンテーションにも説明が掲載されていますが、読んでも実際にどう動くかわからないので色々弄ってみます。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

次はサンプルや公式ドキュメンテーションにも使用されているDAT GUIの使い方と各種Helperの使い方。